vue 3 element plus 報錯 Uncaught TypeError: Cannot set property ‘value‘ of undefined

項目場景：

學習vue3 composition api 時候，使用element plus的el-form > e-input 官方示例報錯

問題描述：

源代碼

<el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="xxx">
          <el-input v-model="form.wbUrl.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即建立</el-button>
        </el-form-item>
      </el-form>

           

• input輸入後會報錯

關鍵詞：

runtime-core.esm-bundler.js:217 Uncaught TypeError: Cannot set property 'value' of undefined

、

[Vue warn]: Unhandled error during execution of component event handler

原因分析：

解決方案：

把示例中的

ref="form"

改成

ref="refForm"

，我們需要給el-form的ref建立一個對象，不可以跟

form

對象混用

<el-form ref="refForm" :model="form" label-width="80px">
        <el-form-item label="xxx">
          <el-input v-model="form.xxx.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即建立</el-button>
        </el-form-item>
      </el-form>

           

setup () {
    const refForm = ref(null)
    return {
    	refForm
    }
}