Как обратиться к элементам и их свойствам внутри перебора v-for? Перебираю в цикле данные и подставляю в разметку. Данные приходят все ок. Но нужно реализовать следующий сценарий:
- имеется несколько li на одной странице, внутри каждой есть картинка и 4 варианта ответа (button).
- при нажатии на одну из кнопок в li_1(например), должны блокироваться (disabled) все кнопки в ДАННОМ li_1. Остальные кнопки должны быть без изменений.
- при нажатии кнопок в следующим li_2 должны блокироваться там все кнопки, но остальные не должны изменятся. И тд.
При нажатии на кнопку вызывается метод @click="checkAnswer(item.lesson_qu_var3, i)", хотелось при вызове этого метода блокировать кнопки. Плюс, в дальнейшем, внутри этого li элемента по нажатию на кнопку и вызове этого метода должны появляться дополнительные div блоки с данными.
Как реализовать этот сценарий? Вообще в Vue так принято делать? Я просто только изучаю его, не знаю как в таких случая правильно делать.
<ul class="lesson-list-ul">
<li v-for="(item, i) in lessonContent" :key="item.id">
<h4 class="lesson-list-h4">{{item.lesson_name}} из {{countLessonsNum}}</h4>
<p class="lesson-list-desc">{{item.lesson_desc}}</p>
<div class="lesson-list-img-wrap">
<img :src=imgSrc+item.lesson_qu_img class="lesson-list-img"/>
</div>
<div class="lesson-list-var-wrap" :id="'id-button-anw1-'+i">
<div class="lesson-list-var-line">
<button class="lesson-list-var" @click="checkAnswer(item.lesson_qu_var1, i)" :disabled = isDisabled>{{item.lesson_qu_var1}}</button>
<button class="lesson-list-var" @click="checkAnswer(item.lesson_qu_var2, i)" :disabled = isDisabled>{{item.lesson_qu_var2}}</button>
</div>
<div class="lesson-list-var-line">
<button class="lesson-list-var" @click="checkAnswer(item.lesson_qu_var3, i)" :disabled = isDisabled>{{item.lesson_qu_var3}}</button>
<button class="lesson-list-var" @click="checkAnswer(item.lesson_qu_var4, i)" :disabled = isDisabled>{{item.lesson_qu_var4}}</button>
</div>
</div>
</li>
</ul>
methods:{
checkAnswer(answer,index){
if (answer == this.lessonContent[index].lesson_qu_answ){
this.countSuccessfulAnswer++;
}else{
console.log('не правильный ответ');
}
},
},