Quasar q-data-table行内q-toggle的v-model绑定问题求助

阿华AIGC实验室

2026-5-27

解决Q-Table中Q-Toggle绑定报错的问题

这个问题我之前也碰到过，你猜的完全没错——col.value是Quasar内部对行数据处理后生成的只读衍生值，直接绑定v-model肯定会触发修改只读属性的报错。解决的核心就是绕开这个衍生值，直接绑定到原始的行数据对象上。

具体解决方案

在Q-Table的body插槽中，Quasar会通过slot-scope传递当前行的原始数据props.row，我们可以直接用这个对象来绑定Q-Toggle的v-model：

修改后的模板代码

<q-table
  :rows="yourRowData"
  :columns="yourColumns"
>
  <q-tr slot="body" slot-scope="props">
    <q-td v-for="col in props.cols" :key="col.name">
      <!-- 针对布尔类型的列，绑定到原始行数据的对应字段 -->
      <q-toggle 
        v-model="props.row[col.name]" 
        v-if="col.name === 'active' || col.name === 'shared'"
      />
      <!-- 其他类型的列正常显示 -->
      <span v-else>{{ col.value }}</span>
    </q-td>
  </q-tr>
</q-table>

关键说明

为什么用props.row[col.name]？
- props.row是当前行的原始数据对象，完全具备Vue的响应式特性，支持双向绑定
- col.name对应你定义的列名（比如'active'、'shared'），通过动态属性访问的方式，能精准匹配到原始数据里的对应字段
额外业务逻辑处理（可选）
如果需要在切换状态时同步更新后端数据，可以给Q-Toggle添加@input事件：

<q-toggle 
  v-model="props.row[col.name]" 
  v-if="col.name === 'active' || col.name === 'shared'"
  @input="handleStatusChange(props.row, col.name)"
/>

然后在组件的methods中实现处理函数：

methods: {
  handleStatusChange(row, field) {
    // 这里可以添加提交到后端的逻辑
    console.log(`更新了ID为${row.id}的${field}字段，新值：${row[field]}`);
    // 示例：调用API更新
    // this.$axios.put(`/api/items/${row.id}`, { [field]: row[field] });
  }
}