Javascript 如何在Vue.js中创建独立运行的动态行？_Javascript_Dynamic_Vue.js_Row_Options

Javascript 如何在Vue.js中创建独立运行的动态行？

javascript dynamic vue.js

Javascript 如何在Vue.js中创建独立运行的动态行？,javascript,dynamic,vue.js,row,options,Javascript,Dynamic,Vue.js,Row,Options,我有一个创建动态行的vue实例。该行有两个选择选项：使用“添加行”按钮添加个人和兴趣。这些选择选项是相关选项：如果我选择Brian作为个人，他在第二个选择选项中的兴趣应该会加载Brian的兴趣。这很有效：问题: 这很好，但是我无法克服的奇怪事情是，当添加第二行时，第二行删除了Brian的兴趣并填充了第二个人的兴趣：例如，Brian对Crossfit不感兴趣-这些是Candice的选择。实际上，Brian的选项并没有被保留，而是被Candices覆盖了——所以两行都显示了Candices的

我有一个创建动态行的vue实例。该行有两个选择选项：使用“添加行”按钮添加个人和兴趣。这些选择选项是相关选项：

如果我选择Brian作为个人，他在第二个选择选项中的兴趣应该会加载Brian的兴趣。这很有效：

问题:

这很好，但是我无法克服的奇怪事情是，当添加第二行时，第二行删除了Brian的兴趣并填充了第二个人的兴趣：

例如，Brian对Crossfit不感兴趣-这些是Candice的选择。实际上，Brian的选项并没有被保留，而是被Candices覆盖了——所以两行都显示了Candices的兴趣

有人能告诉我需要做什么来纠正这个问题吗？我创建了一个JSFIDLE来说明这个问题：

HTML:

JS方法：

jsIDLE:

问题在于您使用了这个.activity.\u activity每一行都使用相同的方法来生成但在updateList中，无论第一个select值何时更改，无论是哪一行，它将更改此.activity.\u活动。它将影响所有第二选择选项，每一行。所以您应该做一些事情来将活动链接到每一行。下面是示例代码，它可以工作，但并不完美

让人们{ _人:[{ 名字：'亚当'，年龄:"16",， ID:'2009121'， }, { 姓名：'布莱恩'，年龄:"18",， ID:'2009122'， }, { 姓名：'坎迪斯'，年龄:"16",， ID:'2009120'， }, ] } 让_={ _活动：[{ 姓名：，类型：， }, ] } 让人 const app=新的Vue{ el:“应用程序”，数据：{ 输入：[]，人:"人,，活动：_兴趣， }, 方法：{ 阿德罗{ 这是推{ 一:,，二:,，活动：[//将活动链接到每一行 } }, 删除行索引{ this.inputs.index，1 }, updateListval，索引{ 此.activity.\u activity=[]；如果val.name==Adam{ //仅更改当前行的第二个选项 this.inputs[index].activity=[{ 名称:"羽毛球",，类型：“20” }, { 名称：'足球'，类型：“30” }] }如果val.name==Brian，则为else{ this.inputs[index].activity=[{ 名称：“篮球”，类型：“90” }, { 名称：“空手道”，类型：“50” }] }如果val.name==Candice，则为else{ this.inputs[index].activity=[{ 名称：“攀岩”，类型：“90” }, { 名称：'交叉配合'，类型：“100” }] } } } } JS-Bin 人： {{options.name} 兴趣： {{options.name} 删去添加行

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="(input, index) in inputs">
          Person:
          <select type="text" v-model="input.one" v-on:change="updateList(input.one)">  
             <option v-for= "options in person._person" v-bind:value ="options">
                {{ options.name }}
             </option>
          </select> Interests:
          <select type="text" v-model="input.two"> 
             <option v-for= "options in activity._activity" v-bind:value ="options">
                {{ options.name }}
             </option>
          </select>
          <button @click="deleteRow(index)">Delete</button>
        </li>
      </ul>

      <button @click="addRow">Add row</button>

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

  </body>

</html>

let _people = {

  _person: [{
      name: 'Adam',
      age: '16',
      ID: '2009121',

    },
    {
      name: 'Brian',
      age: '18',
      ID: '2009122',

    },
    {
      name: 'Candice',
      age: '16',
      ID: '2009120',

    },
  ]
}

let _interests = {

  _activity: [{
    name: '',
    type: '',

  }, ]
}

let person

const app = new Vue({

  el: '#app',

  data: {
    inputs: [],
    person: _people,
    activity: _interests,
  },

  methods: {
    addRow() {
      this.inputs.push({
        one: '',
        two: ''
      })
    },
    deleteRow(index) {
      this.inputs.splice(index, 1)
    },
    updateList(val) {
      this.activity._activity = [];

      if (val.name == "Adam") {
        this.activity._activity.push({
          name: 'Badminton',
          type: '20'
        }, {
          name: 'Football',
          type: '30'
        })
      } else if (val.name == "Brian") {
        this.activity._activity.push({
          name: 'Basketball',
          type: '90'
        }, {
          name: 'Karate',
          type: '50'
        })
      } else if (val.name == "Candice") {
        this.activity._activity.push({
          name: 'Climbing',
          type: '90'
        }, {
          name: 'Cross Fit',
          type: '100'
        })
      }

    }
  }

})