const state = reactive({
form: { factorycode: '' }
})
const factoryCodeOptions = ref([])
const { form, options } = toRefs(state)
工厂别:<el-select v-model="form.factorycode" @change="handleChange" class="m-2" placeholder="工厂别" size="small">
<el-option v-for="item in factoryCodeOptions" :key="item.no" :label="item.factoryname" :value="item.no" />
</el-select>
function handleChange() {
console.log(form.value)
proxy.$modal.msgError('select事件' + form.factorycode)
}
事件触发的时候提示 form.factorycode undefined
为什么在 v-model="form.factorycode" 绑定的时候是 form.factorycode ,获取值的时候是 form.value.factorycode 呢,假如改成如下
function handleChange() {
console.log(form.value)
proxy.$modal.msgError('select事件' + form.value.factorycode)
}
就不会报错, 我就是不明白绑定的时候不要value,取值的时候,一定是form.value.factorycode 加了value
因为在模板中顶层的 ref 会自动解包,不需要写 value
参考官方文档 https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-when-unwrapping-in-templates
我试过,不是不需要写value,反而是写了value结果还出不来,不写value才是对的。
因为这就是vue3