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, так что не судите строго

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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