0

I have a vue instance that creates dynamic rows. The row has two Select Options: Person and Interests with an Add row button. These Select Options are dependent options:

enter image description here

If I select Brian as the Person, his Interests in the second Select Options should load Brian's interests. This works well:

enter image description here

Problem:

This works fine, however the strange thing that I cannot overcome is when a second row is added, the second-row deletes Brian's Interests and Populates the second persons interests:

enter image description here

Brian isn't interested in Crossfit for instance - these are Candice's options. In essence, Brian's options are not preserved, they are overwritten with Candices - so both rows show Candices interests.

Can anyone advise on what I need to do to correct the problem? I have created a Jsfiddle to illustrate the issue:

https://jsfiddle.net/syed263/y9emdLvr/45/

HTML:

<!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>

JS: declaration

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

JS Methods:

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'
        })
      }

    }
  }

})

JSfiddle: https://jsfiddle.net/syed263/y9emdLvr/45/

1 Answer 1

1

The problem is that you use this.activity._activity(every row use the same) to generate the <option>
But in updateList() whenever the first select value change , no matter which row, it will change this.activity._activity.
And it will affect all second select options, every row.
So you should do something to link activity to each row. Sample code like below, it works, but not perfect.

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: '',
        activity: [] // To link activity with each row
      })
    },
    deleteRow(index) {
      this.inputs.splice(index, 1)
    },
    updateList(val, index) {
      this.activity._activity = [];

      if (val.name == "Adam") {
        // only change current row's second option
        this.inputs[index].activity =[{
          name: 'Badminton',
          type: '20'
        }, {
          name: 'Football',
          type: '30'
        }]
      } else if (val.name == "Brian") {
        this.inputs[index].activity =[{
          name: 'Basketball',
          type: '90'
        }, {
          name: 'Karate',
          type: '50'
        }]
      } else if (val.name == "Candice") {
        this.inputs[index].activity =[{
          name: 'Climbing',
          type: '90'
        }, {
          name: 'Cross Fit',
          type: '100'
        }]
      }

    }
  }

})
<!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, index)">  
						<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 input.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>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.