Vue3+TypeScript中textarea用v-model报‘Invalid assignment target’错误求助

问题 #

在Vue3+TypeScript项目中，给textarea绑定v-model.trim="np?.description"时，出现「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） #

<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>

解决方法 #

报错原因 #

v-model是语法糖，编译后会生成$event => 目标属性 = $event的赋值逻辑。但可选链操作符?.的表达式不能作为赋值的左操作数——np?.description编译后等价于np ? np.description : undefined，无法直接对这个表达式赋值，因此触发编译错误。

方案1：移除可选链（推荐） #

由于np是已初始化的ref，内部值不会为null或undefined，直接省略?.即可：

<textarea v-model.trim="np.description"></textarea>

方案2：适配可能为null的场景 #

如果np存在被设为null/undefined的情况，可通过计算属性的get/set封装逻辑：

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Thing {
  description: string
}

const np = ref<Thing | null>({
  description: 'asdf asdf asdf',
})

const description = computed({
  get() {
    return np.value?.description || ''
  },
  set(val: string) {
    if (np.value) {
      np.value.description = val
    }
  }
})
</script>

<template>
  {{ description }}
  <br />
  <textarea v-model.trim="description"></textarea>
</template>

内容的提问来源于stack exchange，提问作者Rio Weber