如何在vue中检查预先选择的复选框答案

【问题标题】：how to checked pre selected checkbox in vue如何在vue中检查预先选择的复选框
【发布时间】：2022-01-05 15:58:43
【问题描述】：

我有一个树形视图复选框，如果您在选择区域时编辑此数据，并且必须根据先前的选择将国家/地区选中为真，则选择数据国家/地区 ID 来自 DB (obj, obj)，因此在编辑相同记录时我希望国家/地区应检查区域名称是否正确，如何在 Vue 中存档此功能我被困在这里，需要尽快解决。

v-model 的子复选框代码无法帮助我检查v-model.countries.id 与children.id 匹配的国家和地区复选框。

我的代码是这样的：

<li
  v-for="(item, i) in groupedzone"
  :key="i"
  :class=" {active: i === isexpand}"
>
  <i class="fa fa-plus" @click="togglelist(i)"></i>

  <div class="">
    <input
      type="checkbox"
      :name="item[0].country_zone.zone_name"
      v-model="isCheckboxSelected"
      v-on:change="parentChange(item)"
    />
    <label :for="item[0].country_zone.zone_name"
      >{{item[0].country_zone.zone_name}}</label
    >
  </div>
  <ol v-if="item.length != 0" class="dd-list-subitems">
    <li v-for="children in item" :key="children.id">
      <div class="">
        <input
          type="checkbox"
          :name="children.name"
          :value="children.id"
          v-model="project.countries"
          :class="'zone'+item[0].country_zone.id"
        />&nbsp;
        <label :for="children.id">{{children.name}}</label>
      </div>
    </li>
  </ol>
</li>

【问题讨论】：

请问可以分享代码吗？另外，到目前为止你有什么尝试过的吗？
是的，您现在可以查看我共享的代码

标签： html sql laravel vue.js

【解决方案1】：

假设您有以下代码：

data: () => ({
   countries: [] // contains ids of countries that should be checked on page load
  allCountries: [] // countries array/objects 
})

然后在你的循环中：

<v-list-item v-for="c in countries">
    <template v-slot:default="{ active }">
       <v-list-item-action>
           <v-checkbox v-model="allCountries"
              :input-value="active"
               color="primary"
               :value="c.id"
            ></v-checkbox>
         </v-list-item-action>

          <v-list-item-content>
             <v-list-item-title>{{ c.name }}</v-list-item-title>
             </v-list-item-content>
         </template>
       </v-list-item>

注意

:value="c.id"

因为它会导致复选框被标记或不被标记

【讨论】：