Vue中v-model结合三元表达式无法访问嵌套对象属性求助

你原来的写法无效是因为$data['detailCompanyDatas.smCompany.name']试图直接访问$data中键名为detailCompanyDatas.smCompany.name的属性，但$data里根本不存在这个键——$data只有detailCompanyDatas这个顶层键，嵌套属性不能通过点分隔的字符串直接作为索引访问。下面提供几种可行的解决方案：

方案1：直接在v-model中绑定目标属性 #

这是最简单直接的方式，不需要借助$data索引，直接根据条件返回对应的属性：

<v-text-field
  v-model="dialogDetail ? detailCompanyDatas.smCompany.name : null"
/>

当dialogDetail为true时，绑定到嵌套的name属性；为false时绑定null（如果需要处理false状态的绑定，可以替换成临时变量或空字符串）。

方案2：使用计算属性实现双向绑定 #

如果需要复用绑定逻辑，或者属性路径更复杂，可以用带get和set方法的计算属性：

<v-text-field
  v-model="currentBinding"
/>

在组件的computed选项中定义：

computed: {
  currentBinding: {
    get() {
      return this.dialogDetail ? this.detailCompanyDatas.smCompany.name : null;
    },
    set(newValue) {
      if (this.dialogDetail) {
        this.detailCompanyDatas.smCompany.name = newValue;
      }
      // 条件为假时可根据需求处理，比如赋值给其他变量或忽略
    }
  }
}

方案3：动态处理任意属性路径（多场景复用） #

如果需要频繁切换不同的属性路径，可以写工具函数解析嵌套路径，再结合计算属性使用：
首先在组件的methods中定义解析函数：

methods: {
  // 获取嵌套属性值
  getNestedValue(obj, path) {
    return path.split('.').reduce((current, key) => current?.[key], obj);
  },
  // 设置嵌套属性值
  setNestedValue(obj, path, value) {
    const keys = path.split('.');
    const lastKey = keys.pop();
    const targetObj = keys.reduce((current, key) => current?.[key], obj);
    if (targetObj) {
      targetObj[lastKey] = value;
    }
  }
}

然后定义计算属性：

<v-text-field
  v-model="dynamicBinding"
/>

computed: {
  dynamicBinding: {
    get() {
      const targetPath = this.dialogDetail ? 'detailCompanyDatas.smCompany.name' : 'name';
      return this.getNestedValue(this.$data, targetPath);
    },
    set(newValue) {
      const targetPath = this.dialogDetail ? 'detailCompanyDatas.smCompany.name' : 'name';
      this.setNestedValue(this.$data, targetPath, newValue);
    }
  }
}

这种方式可以灵活处理任意深度的嵌套属性，适合需要动态切换多个绑定目标的场景。

内容的提问来源于stack exchange，提问作者berkay gezbeli