类星体q-复选框在数据编辑时不被检查。

Question

全,

我有编辑记录场景，在这种情况下，复选框不会自动根据模型数据被选中。如图所示，我为复选框模型提供了调试显示。类星体支持自动检查来自模型的数据，还是在代码中需要特殊的内容？我几乎没试过，但没什么看起来干净的。任何帮助都是非常感谢的。

​

​

下面是子组件中的复选框代码段。子组件在许多父页面中使用。我在其他情况下使用了v-模型，就像在类星体实例中一样，复选框在父页面上运行得很好。在我的示例中，我试图在子组件中使用组复选框并将值同步到父页面。对我来说，另一种解决方案是在所有父页面中复制复选框。即使使用子组件方法，主场景也能正常工作--在这里创建/插入数据，我可以选中/取消复选框值，记录保存也很好。我的问题在第二个场景中--在这个场景中，我试图通过提取保存的数据来编辑记录，在这个场景中，除了组复选框之外，所有的数据元素都会被预先填充。

<div> <q-field :value="durations" label="Select duration option" stack-label ref="durations" :rules="[durationRule]" > <template v-slot:control> <q-checkbox :value="durations" val="30" label="30 min" @input="$emit('update:durations', $event)" /> <q-checkbox :value="durations" val="60" label="60 min" @input="$emit('update:durations', $event)" /> <q-checkbox :value="durations" val="120" label="120 min" @input="$emit('update:durations', $event)" /> </template> </q-field> </div>

Answer 1

我不确定是否是Vue3更改，但我无法获得@输入来触发Q-复选框中的任何东西，以挽救我的生命。这段代码是我试图将两个Q表示例合并在一起的，我希望展开行和复选框从左边多个选择。如果您从工作的多选择开始，然后添加扩展行，扩展行替换会打破复选框，所以我想把它们放回去。我必须找到另一篇关于观察者的文章，才能意识到我可以使用由q-复选框更新的数组来触发我的自定义代码，诀窍是观看深层(就像进入深渊.)：

  //The array attached to v-model on my q-checkboxes
watch: {
 rChecked: {
  handler: function (val, oldVal) { 
    var x,intTrue=0;
    for(x=0;x<this.rChecked.length;x++) {
      if(this.rChecked[x]==true)
        intTrue++;
    }
    if(intTrue==this.rChecked.length) {
      this.bCheckAll=true;
    } 
    else if(intTrue==0) this.bCheckAll=false;
    else this.bCheckAll="maybe";
  },
  deep: true
 },
},

类星体成分：

<q-table
  :rows="GetFoldersInPath"
  :columns="columns"
  :pagination="FolderPagination"
  row-key="name"
  class="full-width"
  selection="multiple"
  v-model:selected="selected"
>
  <template v-slot:header="props">
    <q-tr :props="props" :style="{'background-color':Theme.SideBG}">
      <q-th
        v-for="col in props.cols"
        :key="col.name"
        :props="props"
        :rowspan="(col.name=='name' || col.name=='location_path' || col.name=='last_value' ? 2 : 1)"
      >
        <div v-if="col.name=='id'" style="display:inline-block;"><q-checkbox v-model="bCheckAll" /></div>
        {{col.label}}
      </q-th>
    </q-tr>
  </template>

  <template v-slot:body="props">
    <q-tr :props="props" @click.stop="props.expand = !props.expand" style="cursor:pointer;">
      <q-td
        v-for="col, in props.cols"
        :key="col.name"
        :props="props"
        style="padding:4px 10px;"
      >
        <q-checkbox v-if="col.name=='id'" v-model="rChecked[props.rowIndex]" />
        {{ col.value }} 
      </q-td>
    </q-tr>
  </template>
</q-table>

不，这和上面的内容没有直接关系，但是这和我想要的结果很接近，所以我想我会在这里放弃解决方案。希望它能帮到别人！