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:
If I select Brian
as the Person
, his Interests
in the second Select Options should load Brian's interests. This works well:
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:
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'
})
}
}
}
})