如何通过单击的索引向上和向下切换箭头？ Vue

Question

如何根据点击的项目仅旋转那个箭头图标？

new Vue({
    el: "#app",
    data() {
        return {
            isToggled: false,
            items: [{
                    id: 1,
                    name: "Test1"
                },
                {
                    id: 2,
                    name: "Test2"
                },
                {
                    id: 3,
                    name: "Test3"
                },
                {
                    id: 4,
                    name: "Test4"
                },
            ]
        }
    },
    methods: {
        arrowToggle() {
            this.isToggled = !this.isToggled;
        },
        getItems() {
            return this.items;
        }
    },
    mounted() {
        this.getItems();
    }
});

i {
     border: solid black;
     border-width: 0 3px 3px 0;
     display: inline-block;
     padding: 3px;
}
 .down {
     transform: rotate(45deg);
}
 .up {
     transform: rotate(-155deg);
}
 .accordion {
     display: flex;
     background: lightblue;
     align-items: center;
     width: 100%;
     width: 1000px;
     justify-content: space-between;
     height: 30px;
     padding: 0 20px;
}
.arrow {
  transform: rotate(-135deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" style="display: flex; justify-content: center; align-items: center;">
        <div v-for="(item, index) in items" :key="index">
            <div class="accordion" @click="arrowToggle()">
               <p> {{ item.name }}</p>
                <i :class="{ 'down': item.isToggled }" class="arrow"> </i>
            </div>
        </div>

 </div>

我希望我的箭头根据点击的元素旋转吗？ 如果我有 10 个项目并单击 2 个项目，我希望图标在那里旋转。 无法将 id 绑定到单击的项目并绑定该类以旋转项目 一件事非常重要，我无法在我的 json 项目中设置 isOpen 参数，这是每个人都向我推荐的错误。我从数据库中得到它，我没有它的条件。

Answer 1

您必须在单个项目级别进行切换。请注意，我对每个项目都使用了isToggled。以下是完整代码：https://jsfiddle.net/kdj62myg/

即使您从 DB 中获取项目，您也可以遍历数组并为每个项目添加一个名为 isToggled 的键。

HTML

<div id="app" style="display: flex; justify-content: center; align-items: center;">
        <div v-for="(item, index) in items" :key="index">
            <div class="accordion" @click="arrowToggle(item)">
               <p> {{ item.name }}</p>
                <i :class="{ 'down': item.isToggled, 'up': !item.isToggled  }"> </i>
            </div>
        </div>

 </div>

Vue

new Vue({
    el: "#app",
    data() {
        return {
            isToggled: false,
            items: [{
                    id: 1,
                    name: "Test1",
                    isToggled: false
                },
                {
                    id: 2,
                    name: "Test2",
                    isToggled: false
                },
                {
                    id: 3,
                    name: "Test3",
                    isToggled: false
                },
                {
                    id: 4,
                    name: "Test4",
                    isToggled: false
                },
            ]
        }
    },
    methods: {
        arrowToggle(item) {
            return item.isToggled = !item.isToggled;
        },
        getItems() {
            return this.items;
        }
    },
    mounted() {
        this.getItems();
    }
});

Answer 2

您必须映射您的项目并在其上附加自定义数据才能解决您的问题。

商品数据应该是这样的

  items: [{
            id: 1,
            name: "Test1",
            isToggled: false
        },
        {
            id: 2,
            name: "Test2",
            isToggled: false
        },
        {
            id: 3,
            name: "Test3",
            isToggled: false
        },
        {
            id: 4,
            name: "Test4",
            isToggled: false
        },
    ]

你的togle函数应该是这样的。

arrowToggle(item) {
    return item.isToggled = !item.isToggled;
},

现在，在您从服务器获取项目之后。您必须映射它以在您拥有的每个项目上附加一个 isToggled 数据。像这样。

getItems() {
     axios.get('api/for/items')
    .then(({data}) => {
          this.items = data.map(item => ({
                return {
                    name:item.name,
                    id:item.id,
                    isToggled:false

                }
          }))        
     });
 }

Answer 3

上面的 arrowToggle 函数破坏了 vue 的反应性（google vue reactivity for docs）。根据文档，直接更改对象属性会破坏反应性。为了保持反应性，该函数应更改为：

arrowToggle(item) {
  this.$set(this.item, 'isToggled', item.isToggled = !item.isToggled)
  return item.isToggled;
},