Answer the question
In order to leave comments, you need to log in
Clear from options Select in vue.js on new line?
<div id="app">
<h1>Add user</h1>
<div v-for="(user, index) in users">
<select v-model="user.title" @change="changeUser">
<option value="">Выбрать</option>
<option v-for="o in getOptions(index)" :value="o.id" v-text="o.title"></option>
</select>
<select v-model="user.weight" >
<option value="">Выбрать</option>
<option v-for="o in getOptions2(index)" :value="o.id" v-text="o.title"></option>
</select>
<button @click="deleteUser(index)">
delete
</button>
</div>
<button @click="addUser" :disabled="users.length >= options.length">
New User
</button>
<pre>{{ users.title }}</pre>
<pre>{{ percentTotal }}</pre>
</div>
new Vue({
el: '#app',
data: {
users: [{ name: '', percent: '' }],
options: [
{ title: '', id: '' },
],
options2: [
{ title2: '', id2: '' },
]
},
methods: {
getOptions(index) {
return this.options.filter(o => this.users.every((u, i) => u.title !== o.id || i === index));
},
getOptions2(index) {
return this.options2;
},
addUser(index) {
this.users.push({ title: '',percent:'' });
this.users.weight='';
},
changeUser()
{
var vm = this
fetch('https://jsonplaceholder.typicode.com/photos')
.then(function (response) {
return response.json()
})
.then(function (data) {
vm.options2 = data
})
},
deleteUser(index) {
this.users.splice(index, 1);
if (this.users.length === 0) {
this.addUser();
}
},
},
created: function () {
// Alias the component instance as `vm`, so that we
// can access it inside the promise function
var vm = this
// Fetch our array of posts from an API
fetch('https://jsonplaceholder.typicode.com/posts')
.then(function (response) {
return response.json()
})
.then(function (data) {
vm.options = data
})
},
computed: {
percentTotal() {
return this.users.reduce((acc, user) => acc + parseInt(user.percent, 10), 0)
},
},
});
Answer the question
In order to leave comments, you need to log in
You don't need to clean anything. Let each element have its own options. In the template of the second select, change v-for="o in getOptions2(index)"
to v-for="o in user.options"
; in the change handler of the first select, pass the current object: @change="changeUser(user)"
, and accordingly, put the received data in this object instead of options2 (just cut them out):
changeUser(user) {
fetch('https://jsonplaceholder.typicode.com/photos')
.then(r => r.json())
.then(d => this.$set(user, 'options', d));
},
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question