Vue.js 为v-for循环中的单个项设置css类

我正在使用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>

{{{事物}}-

导出默认值{
名称：“项目列表”，
数据（）{
返回{
项目：[]，
完成：错误
}
},
安装的（）{
事件。$on（'itemAdded'，（数据）=>{
此.items.push（数据）；
})
},
方法：{
stateChange（）{
this.done=！this.done；
}
}
}
.完成{
文字装饰线条：线条贯穿；
}

上面的代码在每个项目中放置一行，而不仅仅是选中的项目

如何进行编码以仅划掉选中的项目

谢谢

---

Paul.

看起来您只有一个完成属性。您应该为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>

{{item.data}}-

导出默认值{
名称：“项目列表”，
数据（）{
返回{
项目：[]，
}
},
安装的（）{
事件。$on（'itemAdded'，（数据）=>{
this.items.push（{data，done:false}）；
})
},
方法：{
stateChange（changeIndex）{
this.items=this.items.map（（项目，索引）=>{
如果（索引===changeIndex）{
返回{
数据：item.data，
完成：！item.done，
};
}
退货项目；
});
}
}
}
.完成{
文字装饰线条：线条贯穿；
}

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

{{item.data}}-

导出默认值{
名称：“项目列表”，
数据（）{
返回{
项目：[]，
}
},
安装的（）{
事件。$on（'itemAdded'，（数据）=>{
this.items.push（{data，done:false}）；
console.log（“数据-”，this.items）
})
},
方法：{
}
}
.完成{
文字装饰线条：线条贯穿；
}

stateChange

可以直接编辑

item

（

item.done=！item.done

），因为

item

是对

items[]的引用。无需再次设置
项目[]
。但我会选择
v-model
，因为它更简单。