Как стрелку переключать вверх и вниз по нажатому индексу? 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 к выбранному элементу и привязать этот класс для поворота элемента. Одна вещь очень важна, я не могу установить параметр isOpen в моих json ПУНКТАХ, который является ложным, который все рекомендуют мне. Я получаю его из базы данных, и у меня нет условия для этого.

Answer 1

Вы должны сопоставить свои предметы и прикрепить к ним пользовательские данные, чтобы решить вашу проблему.

Данные по предметам должны быть такими:

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

и ваша функция toogle должна выглядеть следующим образом .

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 2

Вам придется переключаться на уровне отдельных предметов. Обратите внимание, что я использовал 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>

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();
    }
});