<div id="app">
<h1>Add user</h1>
<div v-for="(user, index) in users">
<select v-model="user.name">
<option value="">Выбрать</option>
<option v-for="o in getOptions(index)" :value="o.value" v-text="o.label"></option>
</select>
<input v-model="user.procent">
<button @click="deleteUser(index)">
delete
</button>
</div>
<button @click="addUser" :disabled="users.length >= options.length">
New User
</button>
<pre>{{ users }}</pre>
<pre>{{ percentTotal }}</pre>
</div>
new Vue({
el: '#app',
data: {
users: [{ name: '', procent: '' }],
options: [
{ label: 'Иванов', value: 'ivanov' },
{ label: 'Петров', value: 'petrov' },
{ label: 'Титарев', value: 'titarev' },
]
},
methods: {
getOptions(index) {
return this.options.filter(o => this.users.every((u, i) => u.name !== o.value || i === index));
},
addUser() {
this.users.push({ name: '',procent:'' });
},
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
param = {
id: 1,
};
// Fetch our array of posts from an API
fetch('https://site.kz/pm/default/quarters', {
method: 'post',
body: JSON.stringify(param),
})
.then(function (response) {
return response.json()
})
.then(function (data) {
vm.options = data
})
},
computed: {
percentTotal() {
return this.users.reduce((acc, user) => acc + parseInt(user.procent, 10), 0)
},
},
});
Вопрос: в created в param id отправляю 1, необходимо взять это число из структуры html, которая постоянно меняется (НЕ статику). Подскажите как это сделать?
Простой
