0

Как обратиться к элементам и их свойствам внутри перебора 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('не правильный ответ');
      } 
   },   
},

Как это выглядит для понимания. vue

2 ответа 2

1

Немного не понятно, но можно сделать так

 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>
1
  • Спасибо, все как надо работает :)
    – lumen
    31 авг 2020 в 15:38
0

Желательно было бы иметь весь код для реализации (изображения).

Можно сделать кнопку на компонент, передавать в нее props и поставить условие. Если оно проходит кнопка показывается. Остальные элементы блокированы по умолчанию. Все вышеперечисленное проходит через итерацию v-for. Итерировать можно данные data

P.S.

Не гуру Vue, так что не судите строго

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.