Vue v-модель, нацеленная на другие элементы в v-for l oop - как построить структуру массива v-модели, чтобы избежать этого - PullRequest
Новая
       67

Vue v-модель, нацеленная на другие элементы в v-for l oop - как построить структуру массива v-модели, чтобы избежать этого

1 голос
/ 09 июля 2020

Резюме: мои входные данные v-модели влияют на другие элементы в том же массиве, но я ожидаю, что они будут ориентированы только на входные данные, которые я изменяю.

В моем хранилище данных Vue у меня есть массив userAnswers из 2 объекты (0 и 1). Это построено на created created () (упоминание в случае, если это актуально).

Вы можете увидеть структуру данных здесь: 

userAnswers:Array[2]
  0:Object
     answers:Object
       1:"3"
       10:"3"
       13:"3"
       15:"99"
       18:"3"
      id:4
   1:Object
     answers:Object
       1:"3"
       10:"3"
       13:"3"
       15:"99"
       18:"3"
      id:3

In В этом примере у меня есть вопросы с идентификаторами 1,10,13 и c. и я использовал следующую v-модель, обернутую в v-for l oop, чтобы получить два ввода. 

<div v-for="(group, key) in selectedAssessment.questions" :key="key">
 <div
     v-for="(participant, i) in participants"
     v-bind:key="participant.id"
 >
     <input type="text" v-model="form['userAnswers'][1]['answers'][question.id]" />
 </div>
</div>

Это циклически перебирает вопросы, а затем внутри этого l oop создает ввод для каждый пользователь. Когда я изменяю ввод для пользователя, он привязывается к обоим вводам в вопросе l oop, когда я ожидаю, что v-модель будет ориентирована только на указанный c идентификатор вопроса пользователя.

Есть что-то У меня отсутствует ссылка на v-model = "", которая вызывает это?

Снимок экрана включен для некоторой ясности.

ОБНОВЛЕНИЕ:

Согласно рекомендации Я создал jsfiddle и изолировал проблему. https://jsfiddle.net/raisonon/jf5t460s/44/

Я создаю объект данных в created (), и это вызывает проблему. Я не уверен, почему. 

  created() {
  
        
    // Form Answers -- Add empty answers arr
         this.form.userAnswers = this.form.userAnswers.map((el) => {
            var o = Object.assign({}, el);
            o.answers =  this.questionIds;
            return o;
        }, this.questionIds);
  }

введите описание изображения здесь

...