[英]How do I use Vue3 + TypeScript v-model on textfield? "ERROR: Invalid assignment target"
[plugin:vite:vue] Transform failed with 1 error:
/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73:
ERROR: Invalid assignment target
"/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73"
Invalid assignment target
31 | ? (_openBlock(), _createElementBlock("div", _hoisted_2, [
32 | _withDirectives(_createElementVNode("textarea", {
33 | "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.np?.description) = $event))
| ^
34 | }, null, 512 /* NEED_PATCH */), [
35 | [
App.vue
:App.vue
:<script setup lang="ts">
import { ref } from 'vue'
interface Thing {
description: string
}
const np = ref<Thing>({
description: 'asdf asdf asdf',
})
</script>
<template>
{{ np?.description }}
<br />
<textarea v-model.trim="np?.description"></textarea>
</template>
Any help here is appreciated <3感谢这里的任何帮助 <3
This problem is rather confounding.这个问题比较费解。
You can't use dual-binding ( v-model
) with optional chaining ( np?.description
).您不能将双重绑定 (
v-model
) 与可选链接 ( np?.description
) 一起使用。 Dual binding means getter & setter.双重绑定意味着 getter & setter。 What do you expect the setter to set when
np
is falsey?当
np
为假时,您希望设置器设置什么? I know you wrapped it in v-if
but optional chaining tells v-model
the target object structure is possibly undefined
, and that's an invalid assignment target.我知道您将它包装在
v-if
中,但可选链接告诉v-model
目标 object 结构可能是undefined
,这是一个无效的赋值目标。
One way to go about it is create a description
computed, where you specify how to set np.description
when the current value of np
allows it: go 关于它的一种方法是创建一个计算
description
,您可以在其中指定当np
的当前值允许时如何设置np.description
:
const description = computed({
get() {
return np.value?.description || ''
},
set(description) {
if (typeof np.value?.description === 'string') {
np.value = { ...np.value, description }
}
},
})
See it working here: https://stackblitz.com/edit/vue3-vite-typescript-starter-wrvbqw?file=src%2FApp.vue看到它在这里工作: https://stackblitz.com/edit/vue3-vite-typescript-starter-wrvbqw?file=src%2FApp.vue
The above is a pretty generic solution (when you actually do need to use optional chaining with v-model
).以上是一个非常通用的解决方案(当您确实需要使用带有
v-model
可选链接时)。
A simpler alternative, in your case (possible because you wrapped the <textarea>
in v-if="np"
), is not using optional chaining with v-model
at all:在您的情况下,一个更简单的选择(可能是因为您将
<textarea>
包装在v-if="np"
中)根本不使用带有v-model
的可选链接:
replace v-model.trim="np?.description"
with v-model.trim="np.description"
.将
v-model.trim="np?.description"
替换为v-model.trim="np.description"
。
It will work.它会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.