如何修复 Vue 3 模板编译错误：v-model 值必须是有效的 JavaScript 成员表达式？

Question

我正在做一个 vue 项目，vue 版本是 3.0 最近由于某种原因我可以看到这么多警告。

模板编译错误：v-model 值必须是有效的 JavaScript 成员表达式

我想这是因为我使用了这样的长 v-model 变量名称。

<textarea v-model="firstVariable.subVariable.subVariableKey" readonly></textarea>

如果有任何想法请告诉我。

提前致谢

这是组件和模板代码。

var myTemplate = Vue.defineComponent({
    template: '#myTemplate',
    
    data() {
        return {
          firstVariable: {}
        }
    },
    
    mounted() {
        loadData();
    },
    
    methods:{
      loadData() {
          axios.get(MY_ROUTES).then(res => {
              // let's suppose res.data is going to be {subVariable: {subVariableKey: "val"}} 
              this.firstVariable = res.data;        
              
          })
      }
    }
    
});

// template.html

<script type="text/template" id="myTemplate">
    <div class="container">
      <textarea v-model="firstVariable.subVariable?.subVariableKey"></textarea>
    </div>
</script>

Answer 1

为了使您的属性具有反应性，您必须定义其完整架构：

  data() {
    return {
      firstVariable: {
        subVariable: {
          subVariableKey: ''
        }
      }
    }
  },

并直接使用它而无需可选链接

v-model="firstVariable.subVariable.subVariableKey" 因为像这个测试v-model="firstVariable.subVariable?.subVariableKey"这样的畸形表达v-model="a+b"

例子

  data() {
    return {
      firstVariable: {
        subVariable: {
          subVariableKey: ''
        }
      }
    }
  },

var comp1 = Vue.defineComponent({
  name: 'comp1',
  template: '#myTemplate',

  data() {
    return {
      firstVariable: {
        subVariable: {
          subVariableKey: ''
        }
      }
    }
  },

  mounted() {
    this.loadData();
  },

  methods: {
    loadData() {

    }
  }

});

const {
  createApp
} = Vue;
const App = {
  
  components: {
    comp1
  },
  data() {
    return {

    }
  },
  mounted() {
    
  }
}
const app = createApp(App)
app.mount('#app')