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

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 参数，这是每个人都推荐给我的 false 参数。 我从数据库中获取它，但我没有条件。

Answer 1

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

即使您从数据库获取项目，您也可以遍历数组并向每个项目添加一个名为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>

视图

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
        },
    ]

你的工具函数应该是这样的。

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 反应性（文档的谷歌vue reactivity ）。 根据文档，直接更改对象属性会破坏反应性。 为了保持反应性，函数应该更改为：

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