Как изменить видимость элемента в цикле v-for в Vue3?

Question

Nicholas

vue

Как изменить видимость элемента в цикле v-for в Vue3?

Как поменять отображение данных с элемента массива, на который было совершено нажатие, таким образом, чтобы они отображались только под этим элементом, а не под всеми элементами в цикле v-for? Какой подход можно использовать для решения этой проблемы?

21 августа 2024 г. 13:23

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для изменения видимости элемента в цикле v-for в Vue3 можно использовать локальное состояние в каждом элементе массива, которое будет указывать на то, нужно ли отображать дополнительные данные. 

Примерно так можно это сделать:

```html
<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <div @click="toggleDetails(item.id)">
        {{ item.title }}
      </div>
      <div v-if="item.showDetails">
        {{ item.details }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      items: [
        { id: 1, title: 'Item 1', details: 'Details 1', showDetails: false },
        { id: 2, title: 'Item 2', details: 'Details 2', showDetails: false }
      ]
    };
  },
  methods: {
    toggleDetails(id) {
      const item = this.items.find(item => item.id === id);
      item.showDetails = !item.showDetails;
    }
  }
};
</script>
```

В этом примере при клике на элемент массива `items` вызывается метод `toggleDetails`, который изменяет значение `showDetails` для соответствующего элемента. Таким образом, только выбранный элемент будет показывать свои дополнительные данные.

Этот подход позволяет управлять видимостью данных для каждого элемента отдельно в цикле v-for.

Answer 2

Вместо 
 const items = ref([{...}])
const data = ref([])
 
 сделай 
 
 const items = ref([{..., itemData: []}]) 
 
 и заполняй (и выводи внутри f-vor) itemData конкретного item