Vue3中v-model与v-for结合单选按钮的迭代变量更新问题求助

云上老周

2026-7-29

解决Vue3中v-model与v-for结合的单选按钮值绑定问题

错误原因

报错信息 'v-model' directives cannot update the iteration variable 'etat_commande' itself 的核心问题是：你将v-model直接绑定到了v-for循环的迭代变量etat_commande上。Vue禁止修改v-for的迭代变量——这个变量只是数组元素的临时引用，修改它既不会同步到原数组，还会引发数据逻辑混乱。

同时你的代码存在变量重名问题：computed属性名etat_commande和v-for迭代变量名完全一致，进一步加剧了逻辑混淆。

修正方案

1. 调整模板代码

修改v-for迭代变量名，并将input的v-model绑定到正确的computed属性：

<div
  v-for="etat in etat_commandes"
  :key="etat.code"
>
  <input type="radio"
    :value="etat.code"
    v-model="selectedEtatCommande"
    :disabled="!canWrite('etat_commande')"
    @change="onChange('etat_commande')"
    name="radio"
  >
  {{ etat.label }}
</div>

2. 修正Script逻辑

重命名computed属性避免变量冲突，确保双向绑定逻辑正确：

export default {
  data() {
    return {
      etat_commandes: [],
    }
  },
  computed: {
    selectedEtatCommande: {
      set(code) {
        console.log("selected code", code);
        if (code !== "") {
          this.articleStore.article.etat_commande = { code };
        } else {
          this.articleStore.article.etat_commande = null;
        }
      },
      get() {
        const code = this.articleStore.article?.etat_commande?.code;
        return code != null && code != undefined ? String(code) : "";
      }
    }
  }
}