如何在文字欄位上使用 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 目標物件結構可能是未定義的，這是一個無效的賦值目標。

一種方法是建立一個計算的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 }
    }
  },
})

在此處查看它的工作原理：https： //stackblitz.com/edit/vue3-vite-typescript-starter-wrvbqw?file=src/App.vue

---

#上面是一個非常通用的解決方案（當您實際上確實需要使用 v-model 的可選連結時）。
在您的情況下，一個更簡單的替代方案（可能是因為您將 包裝在v-if="np" 中），不使用 v 的可選連結-model 根本：
將 v-model.trim="np?.description" 替換為 v-model.trim="np.description"。

它會起作用。