Как Vue.js обратиться к элементам внутри
Как обратиться к элементам и их свойствам внутри перебора 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('не правильный ответ');
}
},
},
Как это выглядит для понимания.
Ответы (2 шт):
Немного не понятно, но можно сделать так
data() {
return {
checkedArr: []
}
}
methods:{
checkAnswer(answer,index){
this.checkedArr.push(index);
if (answer == this.lessonContent[index].lesson_qu_answ){
this.countSuccessfulAnswer++;
}else{
console.log('не правильный ответ');
}
},
},
Кнопки:
<button class="lesson-list-var" @click="checkAnswer(item.lesson_qu_var3, i)" :disabled ="checkedArr.indexOf(i) != -1">{{item.lesson_qu_var3}}</button>
Желательно было бы иметь весь код для реализации (изображения).
Можно сделать кнопку на компонент, передавать в нее props и поставить условие. Если оно проходит кнопка показывается. Остальные элементы блокированы по умолчанию. Все вышеперечисленное проходит через итерацию v-for. Итерировать можно данные data
P.S.
Не гуру Vue, так что не судите строго