国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

我一直在嘗試創(chuàng)建一個帶有樣式復(fù)選框和相應(yīng)標(biāo)簽的簡單組件。所有選定復(fù)選框的值（字符串）應(yīng)存儲在一個數(shù)組中。這適用于純 html 復(fù)選框：

<template>
  <div>
    <div class="mt-6">
      <div>
        <input type="checkbox" value="EVO" v-model="status" /> <label for="EVO">EVO</label>
      </div>
      <div>
        <input type="checkbox" value="Solist" v-model="status" /> <label for="Solist">Solist</label>
      </div>
      <div>
        <input type="checkbox" value="SPL" v-model="status" /> <label for="SPL">SPL</label>
      </div>
    </div>
    <div class="mt-3">{{status}}</div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  
  let status = ref([]);
</script>

它會導(dǎo)致以下所需的情況：

現(xiàn)在，如果我用自定義復(fù)選框組件替換這些復(fù)選框，我將無法使其工作。如果我選中一個框，它發(fā)出的值似乎會替換 status 數(shù)組，而不是添加到其中或從中刪除，從而導(dǎo)致以下結(jié)果：

因此，由于某種原因，默認情況下會選中所有復(fù)選框，當(dāng)我單擊其中一個復(fù)選框時，它們都會被取消選中，并且 status 值會轉(zhuǎn)到 false ，再次單擊任何一個復(fù)選框?qū)⑦x中所有復(fù)選框并使 status true。

現(xiàn)在，我知道在發(fā)射中返回是否選中該框會返回 true 或 false 值，但我不明白 Vue 如何使用本機復(fù)選框執(zhí)行此操作以及如何使用我的組件實現(xiàn)此行為。

這是我的復(fù)選框組件的代碼：

<template>
  <div class="mt-1 relative">
    <input
      type="checkbox"
      :id="id ?? null"
      :name="name"
      :value="value"
      :checked="modelValue ?? false"
      class="bg-gray-200 text-gold-500 rounded border-0 w-5 h-5 mr-2 focus:ring-2 focus:ring-gold-500"
      @input="updateValue"
    />
    {{ label }}
  </div>
</template>

<script setup>
  const props = defineProps({
    id: String,
    label: String,
    name: String,
    value: String,
    errors: Object,
    modelValue: Boolean,
  })
  
  const emit = defineEmits(['update:modelValue'])
  
  const updateValue = function(event) {
    emit('update:modelValue', event.target.checked)
  }
</script>

并且父組件僅使用不同的模板：

<template>
  <div>
    <div class="mt-6">
      <Checkbox v-model="status" value="EVO" label="EVO" name="status"  />
      <Checkbox v-model="status" value="Solist" label="Solist" name="status" />
      <Checkbox v-model="status" value="SPL" label="SPL" name="status" />
    </div>
    <div class="mt-3">{{status}}</div>
  </div>
</template>

我試圖查看 StevenSiebert 的這個答案，但它使用一個對象，我想使用本機復(fù)選框復(fù)制原始的 Vue 行為。

我還參考了 v-model 上的官方 Vue 文檔，但不明白為什么這對于本機復(fù)選框的工作方式與對于組件的工作方式不同。