如何在文本字段上使用 Vue3 + TypeScript v-model？“错误：分配目标无效”

Question

完整错误：

[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
这个问题相当令人困惑。

Answer 1

不能将双重绑定 ( v-model) 与可选链接 ( np?.description) 一起使用。双重绑定意味着 getter 和 setter。np当false时，您期望设置器设置什么？我知道您将其包装起来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%2FApp.vue

上面是一个非常通用的解决方案（当您实际上确实需要使用可选链接时v-model）。
在您的情况下，一个更简单的替代方案（可能是因为您包装了 in <textarea>） ，根本v-if="np"不使用可选链接 with ： 替换为。v-model
v-model.trim="np?.description"v-model.trim="np.description"

它会起作用的。