Я играю с Vue.js и пытаюсь изменить класс отдельных элементов в маршруте v-for в зависимости от флажка.
<template>
<div>
<ul>
<div :class = "{completed: done}" v-for = "things in items">
<h6 v-bind:key = "things"> {{things}} - <input @click = "stateChange" type = "checkbox"/></h6>
</div>
</ul>
</div>
</template>
<script>
export default {
name: 'ItemList',
data() {
return {
items: [],
done: false
}
},
mounted() {
Event.$on('itemAdded', (data) => {
this.items.push(data);
})
},
methods: {
stateChange() {
this.done = !this.done;
}
}
}
</script>
<style>
.completed {
text-decoration-line: line-through;
}
</style>
Приведенный выше код помещает строку через каждый элемент, а не только отмеченный.
Как ввести код, чтобы вычеркнули только отмеченный пункт?
Спасибо Павел.
Похоже, у вас есть только одно готовое свойство. У вас должно быть свойство done для каждого элемента в массиве items, чтобы это работало. Ваш товар должен понравиться {data: 'somedata', done: false }
Это должно работать:
<template>
<div>
<ul>
<div :class = "{completed: item.done}" v-for = "(item,index) in items">
<h6 v-bind:key = "things"> {{item.data}} - <input @click = "stateChange(item)" type = "checkbox"/></h6>
</div>
</ul>
</div>
</template>
<script>
export default {
name: 'ItemList',
data() {
return {
items: [],
}
},
mounted() {
Event.$on('itemAdded', (data) => {
this.items.push({ data, done: false });
})
},
methods: {
stateChange(changeIndex) {
this.items = this.items.map((item, index) => {
if (index === changeIndex) {
return {
data: item.data,
done: !item.done,
};
}
return item;
});
}
}
}
</script>
<style>
.completed {
text-decoration-line: line-through;
}
</style>
@Axnyff Вы были очень близки. Спасибо. Вот небольшие изменения, которые я внес, чтобы он заработал.
<template>
<div>
<ul>
<div :class = "{completed: item.done}" v-for = "item in items">
<h6> {{item.data}} - <input @click = "item.done = !item.done" type = "checkbox"/></h6>
</div>
</ul>
</div>
</template>
<script>
export default {
name: 'ItemList',
data() {
return {
items: [],
}
},
mounted() {
Event.$on('itemAdded', (data) => {
this.items.push({ data, done: false });
console.info("DATA- ", this.items)
})
},
methods: {
}
}
</script>
<style>
.completed {
text-decoration-line: line-through;
}
</style>
stateChange
может редактироватьitem
напрямую (item.done = !item.done
), посколькуitem
является ссылкой наitems[]
. Повторная установкаitems[]
не требуется. Но я бы выбрал здесьv-model
, так как он намного проще.