Добавить динамически ввод в vuejs и отображать данные

Question

Я использую vue2 и laravel 6, и я пытаюсь добавить поле ввода в мою таблицу, где data:activities имел отношение с scores

<button type="button"  @click="addAct" >add activity</button>
<tr v-for="(student,index) in students" :key="index">
  <td v-for="(quiz,i) in activities" :key="i">
     //When I used this i can display my data coming from DB. but i get an error
        <input  v-model="quiz.scores[index].scores"autocomplete="off" />
     //When i used this input i can add dynamically but i can't display my DB data
        <input  v-model="quiz.scores[index]" autocomplete="off" />
  </td>
</tr>

data() {
return {
    activities:[{"id":42,"activity_title":"1","hps":"1",
      "scores":[
          {"id":158,"scores":2,"student_id":1,"activity_id":42},
          {"id":159,"scores":2,"student_id":2,"activity_id":42},
          {"id":160,"scores":2,"student_id":3,"activity_id":42},
          {"id":161,"scores":2,"student_id":4,"activity_id":42}]
         }],
     students:[
          {"name":"Ellis Corkery MD","id":1},
          {"name":"Lucie Rau""id":2},
          {"name":"Delia Donnelly","id":3},
          {"name":"Chyna Barton","id":4}]
}
},
methods:{

   addAct: function() { 
       this.activities.push( { activity_title: [], hps:[], scores:[] );
       },
}

[Vue warn]: Ошибка при рендеринге: «Ошибка типа: quiz.scores [_vm.index] не определена». Я получаю это при попытке использовать первый вход в мой шаблон

Answer 1

В вашем примере вы толкаете объект, имеющий массив с нулевой длиной. и в вашем шаблоне вы ищете quiz.scores[index].scores, поэтому выдается правильная ошибка

Vue warn]: Ошибка при рендеринге: "TypeError: quiz.scores [_vm.index] не определен". Я получаю это, когда пытаюсь использовать первый вход в мой шаблон

v-модель ищет любую переменную, которая не существует, и поэтому ошибка

Answer 2

Вы можете попробовать изменить quiz на v-model из activity следующим образом:

<tr v-for="(student,index) in students" :key="index">
  <!-- Filter Student Scores -->
  <td>{{student.name}}</td>
  <td v-for="(iact, i) in activities" :key="i">
    <!-- Get Specific Student Score based on student_id -->
    <div v-for="(quiz, i2) in iact.scores" :key="i2">
      <input v-if="iact.scores[i2].student_id == student.id" v-model="iact.scores[i2].scores">
    </div>
  </td>
</tr>

Для правильной работы функции addAct необходимо добавить начальное значение оценки, например this:

this.activities.push({
    id: "",
    activity_title: "",
    hps: "",
    scores: [
      { id: 170, scores: null, student_id: 1, activity_id: 43 },
      { id: 170, scores: null, student_id: 2, activity_id: 43 },
      { id: 170, scores: null, student_id: 3, activity_id: 43 },
      { id: 170, scores: null, student_id: 4, activity_id: 43 }
    ]
  });

Это потому, что вы привязываете v-модель к объекту activity[array].score[array].score. Если ввести пустое значение, это приведет к ошибке.

Мой предыдущий ответ:

Хотите ли вы отобразить оценку активности каждого студента следующим образом:?

Name     | Activity 1 | Activity 2 |
---------+------------+-------------+
Student 1|    xxx     |    xxx     |
Student 2|    xxx     |    xxx     |

Если да, то может быть, вы можете попробовать это:

<!-- Show Each Student Activity Scores :  n row  -->
<tr v-for="(student,index) in students" :key="index">
  <!-- For easier reading -->
  <td>{{student.name}}</td> 
  <!-- Loop each activity / quiz -->
  <td v-for="(quiz, i) in activities" :key="i">
    <!-- Get Specific Student Score based on student_id --> 
    <input v-if="quiz.scores[index].student_id == student.id" v-model="quiz.scores[index].scores">
  </td> 
</tr>

Я должен попробовать это с помощью CodeSandbox здесь: https://codesandbox.io/s/sample-activity-tlckd Надеюсь, что поможет

Answer 3

Ваши действия данных, каждый элемент которых не имеет scores, поэтому в вашем массиве activities первый объект имеет scores, согласно вашим данным это должно работать

<tr v-for="(student,index) in students" :key="index">
  <td >
     //Now this should work
        <input  v-model="activities[0].scores[index]"autocomplete="off" />
     //as per data you have to check this 
        // <input  v-model="quiz.scores[index]" autocomplete="off" />
  </td>
</tr>