更改呈现在v-for中的另一个组件的组件状态

<template>
  <div>
    <child-component v-for="item in items" :key="item.id" :item="item" @change-status="handleChangeStatus"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: [
        { id: 1, status: 'active' },
        { id: 2, status: 'inactive' },
        { id: 3, status: 'active' }
      ]
    };
  },
  methods: {
    handleChangeStatus(itemId, newStatus) {
      // 根据itemId和newStatus更新items中对应项的状态
      // ...
    }
  }
};
</script>

<template>
  <div>
    <p>{{ item.status }}</p>
    <button @click="changeStatus">Change Status</button>
  </div>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    changeStatus() {
      const newStatus = this.item.status === 'active' ? 'inactive' : 'active';
      this.$emit('change-status', this.item.id, newStatus);
    }
  }
};
</script>