Установить класс CSS для отдельных элементов в цикле v-for

Question

Я играю с 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>

Приведенный выше код помещает строку в каждый элемент, а не только в проверенный.

Как мне кодировать, чтобы зачеркнуть только отмеченный элемент?

Спасибо Пол.

Answer 1

@ 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.log("DATA- ", this.items)
            })
        },
        methods: {


        }
    }
</script>

<style>
    .completed {
        text-decoration-line: line-through;
    }
</style>

Answer 2

Похоже, у вас есть только одно готовое свойство. Вы должны иметь свойство 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>