<template>
<div id="app">
<vue-bootstrap4-table :rows="rows" :columns="columns" :actions="actions" :config="config" @on-select-row="onSelectRow" @on-change-query="onChangeQuery">
</vue-bootstrap4-table>
<span>Checked names: {{ checkedNames }}</span>
</div>
</template>
<code lang="javascript">
data: function() {
return {
checkedNames: []
}
},
methods: {
onSelectRow(e)
{
this.checkedNames=e.selected_items;
},
},
</code>
<li class="list-group-item" :class="{ active: activeUsers($route.path,$route.params.id) }"> <router-link to="/accounting/consigment">Накладная</router-link></li>
methods:{
activeUsers(route,id)
{
if(route === '/accounting/consigment' || route === '/accounting/editconsigment/'+id)
{
return true;
}
return false;
},
},
<tr v-for="(child, index) in allchild" v-bind:key="index">
<button @click="onSubmit" type="button" class="btn" v-for="(day, index2) in days" v-bind:key="index2" :day="day.full" :children="child.id" :class="{'btn-primary': activeUsers(day.full,child.id) }">{{day.d}}</button>
</tr>
activeUsers(day,child)
{
if(this.journal[day] && this.journal[day][child])
{
return true;
}
return false;
}
<div id="app">
<h1>Add user</h1>
<div v-for="(user, index) in users">
<select v-model="user.title">
<option value="">Выбрать</option>
<option v-for="o in getOptions(index)" :value="o.id" v-text="o.title"></option>
</select>
<input v-model="user.percent">
<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: '', percent: '' }],
options: [
{ title: 'Иванов', id: 'ivanov' },
{ title: 'Петров', id: 'petrov' },
{ title: 'Титарев', id: 'titarev' },
]
},
methods: {
getOptions(index) {
return this.options.filter(o => this.users.every((u, i) => u.title !== o.id || i === index));
},
addUser() {
this.users.push({ title: '',percent:'' });
},
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)
},
},
});