Здравствуйте, делаю на vue.js чеклист, есть две вкладки pending и complete. Когда я выделяю один из тасков в pending, то он должен перекидываться в complete посредством фильтров для обеих вкладок(массив тасков один, у каждого есть свойство complete: true/false - по нему фильтруется вывод в разные вкладки pending и complete). Все работает, но когда я помечаю первый таск как сделанный, то он уходит во вкладку complete, как и должно быть, но почему то checkbox выделяется у следующего таска, вот так:
https://monosnap.com/file/ISLnyKsGMpR3q3ScNj2a1EzY...
PS: Если заменить ui-checkbox на обычный input type="checkbox" то все ок, но мне нужен именно ui-checkbox
Вот код компонента:
<template>
<div class="todo">
<h1 class="title">Checklist</h1>
<div class="content">
<ui-tabs
background-color="primary"
fullwidth
text-color-active="white"
text-color="white"
>
<ui-tab title="Pending">
<ul class="tasks">
<li v-for="task in pendingList" :class="{complete : task.complete}">
<label class="task-label">
<ui-checkbox class="task__checkbox" v-model="task.complete" />
{{task.name}}
</label>
</li>
</ul>
</ui-tab>
<ui-tab title="Complete">
<ul class="tasks">
<li v-for="task in completedList" :class="{complete : task.complete}">
<label class="task-label crossed">
<ui-checkbox class="task__checkbox" v-model="task.complete" />
{{task.name}}
</label>
</li>
</ul>
</ui-tab>
</ui-tabs>
</div>
<form novalidate class="controlls" @submit.prevent="validateBeforeSubmit">
<ui-textbox
class="controlls__input"
placeholder="e.g. 'read vue.js guide'"
v-model="newTaskName"
v-validate="'required'"
></ui-textbox>
<ui-button class="controlls__button" color="primary" icon="add">Add</ui-button>
</form>
</div>
</template>
<script>
export default {
data () {
return {
newTaskName : '',
tasks : [
{name : 'create skeleton of todo', complete : true},
{name : 'add ability to add tasks', complete : true},
{name : 'clear task name after clicking "Add"', complete : true},
{name : 'put "Add" button in one line with input', complete : true},
{name : 'replace <input> with <ui-checkbox> in tasks list', complete : true},
{name : 'when task is complete cross it out', complete : true},
{name : 'split tasks into "pending" and "complete" tabs with <ui-tabs>', complete : true },
{name : 'don\'t allow to add empty tasks', complete : true},
{name : 'make list of tasks scrollable, if there\'re are a lot of tasks', complete : true},
{name : 'extract list item into a separate vue.js component', complete : false},
{name : 'persist tasks list in a local storage', complete : false},
{name : 'add animation on task completion', complete : false}
]
}
},
methods: {
addTask () {
this.tasks.push(
{
name: this.newTaskName,
complete: false
}
);
this.newTaskName = null;
},
validateBeforeSubmit() {
this.$validator.validateAll().then(
success => {
this.addTask();
},
error => {
return;
}
);
}
},
computed: {
pendingList() {
return this.tasks.filter(task => {
return !task.complete;
})
},
completedList() {
return this.tasks.filter(task => {
return task.complete;
})
}
}
};
</script>
Из-за чего такое может происходить?
