vue.js - 如何修复 Vue 3 模板编译错误 : v-model value must be a valid JavaScript member expression?

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

为了让您的属性(property)成为响应式(Reactive)的，您必须定义其完整架构:

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

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

v-model="firstVariable.subVariable.subVariableKey" 因为 v-model="firstVariable.subVariable?.subVariableKey" 格式错误的表达式像这样的 v-model="a+b" test

例子

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')

<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app" >
  vue 3 app
  <comp1 />
</div>
<script type="text/template" id="myTemplate">
  <div class="container">
    <textarea v-model="firstVariable.subVariable.subVariableKey"></textarea>
    <div>
      {{firstVariable.subVariable.subVariableKey}}
    </div>
  </div>
</script>