Отображение и скрытие div в элементах списка v-for (Vue.js 2)

У меня есть цикл v-for, и когда щелкают элемент в этом цикле, я хочу скрыть div # one и показать div # two. Затем нажмите кнопку в div # two, чтобы скрыть и снова отобразить div # one. Только для этого пункта списка.

Шаблон:

<div v-for="slider in slideritems">
    <div v-if="!showEdit" @click="openEditor(slider)">
        Normal list item, click to show edit options
    </div>
    <div v-if="showEdit">
        <div @click="closeEditor(slider)">Close</div>
        Edit options (if selected)
    </div>
</div>

Скрипты:

export default {
    methods: {
        openEditor(slider) {
            slider.showEdit = true
        },
        closeEditor(slider) {
            slider.showEdit = false
        }
    }
}

javascript list html vue.js vuejs2
person Jack Barham    schedule 11.02.2017    source источник
comment
Вы никогда не определяли closeEditor метод - у вас есть два openEditor метода. Это просто опечатка в вопросе? Кроме того, каков ваш настоящий вопрос? Что-то не работает?   -  person PatrickSteele    schedule 11.02.2017
comment
Хорошо замечено, это была ошибка при вводе его в SO, на самом деле это не решает проблему. Я немного обновил свой вопрос. Я хочу показать и скрыть определенные div в элементе цикла. Но только для этого предмета.   -  person Jack Barham    schedule 11.02.2017

Ответы (2)


arrow_upward
2
arrow_downward

Поскольку ваши методы переворачивают элемент showEdit объекта ползунка, я думаю, вы хотите, чтобы v-if был привязан к slider.showEdit, а не только к showEdit:

<div v-for="slider in slideritems">
    <div v-if="!slider.showEdit" @click="openEditor(slider)">
        Normal list item, click to show edit options
    </div>
    <div v-if="slider.showEdit">
        <div @click="closeEditor(slider)">Close</div>
        Edit options (if selected)
    </div>
</div>

Вот рабочий jsFiddle: https://jsfiddle.net/psteele/wn1npgqu/

person PatrickSteele    schedule 11.02.2017

arrow_upward
2
arrow_downward 

<li v-for="(data, index) in skills" :key="index+1">
  {{index + 1}}. {{data.skillName}}
  <i v-b-toggle="index + 1" class="fa fa-plus-circle"></i>             
  <b-collapse v-bind:id="index + 1" class="mt-2">Here will be your result</b- 
 collapse>
</li>

Вы можете получить представление о bootstrap-vue.js. Этим я решаю свою задачу. Вот ссылка https://bootstrap-vue.js.org/docs/components/collapse/

person Tushar Roy    schedule 17.01.2019