如何通過單擊索引向上和向下箭頭切換？ 視圖

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