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

似乎您只有一个完成的属性。对于您的items数组中的每个元素，您都应该具有done属性，以使其起作用。您的商品应为{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>

Answer 2

@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>

在v-for循环中为单个项目设置CSS类

2 个答案: