完整錯誤：
[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：
<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>
這里是錯誤的完整重現：
- https://stackblitz.com/edit/vue3-vite-typescript-starter-jkcbyx?file=src/App.vue
感謝這里的任何幫助 <3
這個問題相當混亂。
uj5u.com熱心網友回復：
您不能將雙重系結 ( v-model) 與可選鏈接 ( np?.description) 一起使用。雙重系結意味著 getter & setter。np當falsey時，您希望 setter 設定什么？我知道您將其包裝在其中，v-if但可選鏈接告訴v-model目標物件結構可能是undefined，這是一個無效的賦值目標。
一種解決方法是創建一個計算，您可以在其中指定當前值允許時description如何設定：np.descriptionnp
const description = computed({
get() {
return np.value?.description || ''
},
set(description) {
if (typeof np.value?.description === 'string') {
np.value = { ...np.value, description }
}
},
})
看到它在這里作業：https ://stackblitz.com/edit/vue3-vite-typescript-starter-wrvbqw?file=src/App.vue
上面是一個非常通用的解決方案（當你確實需要使用可選鏈接時v-model）。
一個更簡單的選擇，在你的情況下（可能是因為你包裝了<textarea>in v-if="np"），根本不使用可選鏈接 with v-model：
替換v-model.trim="np?.description"with v-model.trim="np.description"。
它會起作用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/534788.html