更改从 v-for 生成的布尔 v-model

Question

谁能解释一下这个案例？

我目前有一个自定义复选框vue 组件，看起来像这样（我正在使用tailwindcss，顺便说一下它太酷了）

// MyCheckbox.vue

<template>
  <div class="grid grid-flow-col auto-cols-max gap-1 place-items-center">
    <input
      @change="(event) => $emit('update:checked', event.target.checked)"
      type="checkbox"
      :checked="checked"
      :class="{ 'cursor-pointer': !disabled }"
      class="bg-white my-checkbox appearance-none h-5 w-5 m-1 border text-royal border-grey-2 checked:bg-royal rounded focus:outline-none"
    />
    <label v-if="label" class="font-medium">{{ label }}</label>
  </div>
</template>

<script>
export default {
  name: 'MyCheckbox',
  props: {
    checked: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: '',
    },
  },
},
</script>

<style lang="scss" scoped>
.my-checkbox:checked {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0id2hpdGUiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE2LjcwNyA1LjI5M2ExIDEgMCAwMTAgMS40MTRsLTggOGExIDEgMCAwMS0xLjQxNCAwbC00LTRhMSAxIDAgMDExLjQxNC0xLjQxNEw4IDEyLjU4Nmw3LjI5My03LjI5M2ExIDEgMCAwMTEuNDE0IDB6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIC8+Cjwvc3ZnPg==);
  border-color: transparent;
  background-size: 100% 100%;
  background-position: 50%;
  background-repeat: no-repeat;
}

如果我在另一个组件中生成带有v-for 循环的组件，如下面的代码，则无论何时我选中或取消选中它，v-model 都不会更改。

// AnotherComponent.vue

<template>
  <div class="grid grid-flow-col auto-cols-max gap-6">
    <my-checkbox
      v-for="obj in [{ state: true, id: 1 }, { state: true, id: 2 }, { state: false, id: 3 }]"
      :key="obj.id"
      v-model:checked="obj.state"
      :label="`Item ${obj.state}`"
    />
  </div>
</template>

<script>
  import MyCheckbox from '@/components/MyCheckbox.vue';

  export default {
    name: 'AnotherComponent',
  }
</script>

但是当我像这样循环遍历本地状态时，状态会发生变化，它可以正常工作

// AnotherComponent.vue

<template>
  <div class="grid grid-flow-col auto-cols-max gap-6">
    <my-checkbox
      v-for="obj in anArrayOfObj"
      :key="obj.id"
      v-model:checked="obj.state"
      :label="`Item ${obj.state}`"
    />
  </div>
</template>

<script>
  import MyCheckbox from '@/components/MyCheckbox.vue';

  export default {
    name: 'AnotherComponent',
    data() {
    return {
      anArrayOfObj: [
        { state: false, id: 1 },
        { state: false, id: 2 },
        { state: false, id: 3 },
        { state: false, id: 4 },
        { state: true, id: 5 },
      ],
    }
  }
</script>

[{ state: true, id: 1 }, { state: true, id: 2 }, { state: false, id: 3 }] 不能反应吗？如果是，是否有解决方法来操纵其中的布尔 v 模型？因为我在另一种情况下从v-slotscoped slot data 获取数组（涉及另一个更复杂的组件）

Answer 1

我认为这是正确的行为。在您的第一种情况下，每次 v-for 都会得到[{ state: true, id: 1 }, { state: true, id: 2 }, { state: false, id: 3 }]。因此，复选框 q 和 2 将始终具有 state = true，而复选框 3 将始终具有 state=false。尽管您通过复选框更改了 state 的值，但再次发送到复选框的道具变得与以前相同，因为您每次都使用 v-for 提供新数组。

但是，在第二种情况下，由于您从 vue 提供反应性数据，因此当您更改值时，状态会更新，并且您的复选框会起作用。这里提供的对象数组每次都是一样的。

我不确定我是否能够以最好的方式回答这个问题，但其他人可能会为您提供更好的解释。