具有唯一值的 Laravel VUEJS 动态行答案

【问题标题】：Laravel VUEJS dynamic row with unique value具有唯一值的 Laravel VUEJS 动态行
【发布时间】：2020-03-16 06:04:42
【问题描述】：

我有一个函数可以在按下按钮时添加一个新行，但是当我有 2 行或更多行并在下拉菜单中获取所选学生的年龄时，无论最后一行的值是什么也将是第一行的值。我该如何解决？这是选择选项：

<tbody>
  <tr v-for="(form, index) in addForms">
    <td class="text-xs-left">
      <select @change="getAge" v-model="form.student_id" class="form-control">
        <option disabled>Select Student</option>
        <option  v-for="student in students" :value="student.student_id">{{student.student_name}}</option>
      </select>
    </td>
    <td class="text-xs-left">
      <select v-model="form.student_age" class="form-control">
        <option v-for="student in studentAge" :value="student.age">{{student.age}}</option>
      </select>
    </td>
  </tr>
</tbody>

这是添加新行的方法

addForm(){
  this.addForms.push({
    student_id: '',
    student_age: ''
  });
}

以及获取学生年龄的方法：

getPrice(e){
  axios.get('/api/student',{
    params: {
      student_id: this.addForms[this.addForms.length-1].product_id
    }
  }).then(function(response){
    this.studentAge = response.data;           
  }).bind(this));
}

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

您的数据是什么样的？我在 addForms、students 和 studentAge 上看到了三个 v-for 循环。目前尚不清楚这些是如何相关的。 <option v-for="student in studentAge" 对我来说尤其没有意义。另外，我认为在 v-for 中包含 v-model 是没有意义的。我可能是错的。对我来说，虽然 v-model 是针对一个数据的。如果您在 for 循环中执行此操作，那么您正在将一堆值建模为特定值，或者您需要执行类似 v-model="someArray[index]" 的操作，但这似乎很难阅读和推理。 Here's 我尝试在代码笔中重新创建您的示例。如果你用你的数据模型更新它并解释事情应该如何工作也许会有所帮助？

【讨论】：