Bagaimana untuk menggunakan Vue3 + TypeScript v-model pada medan teks? "Ralat: Sasaran peruntukan tidak sah"

Question

Sangat salah:

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

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

Berikut ialah pengeluaran semula lengkap ralat:

• https://stackblitz.com/edit/vue3-vite-typescript-starter-jkcbyx?file=src/App.vue

---

Terima kasih atas sebarang bantuan di sini <3

Soalan ini agak mengelirukan.

Answer 1

Anda tidak boleh menggabungkan ikatan berganda (v-model) 与可选链接 (np?.description). Pengikatan berganda bermaksud pengambil dan penetap. Apakah yang anda mahu penetap tetapkan apabila np palsu? Saya tahu anda membungkusnya dalam v-if , tetapi pautan pilihan memberitahu v-model bahawa struktur objek sasaran mungkin tidak ditentukan, yang merupakan sasaran tugasan yang tidak sah.

Salah satu cara ialah membuat description，您可以在其中指定当np的当前值时如何设置np.description > yang dikira yang membolehkan:

const description = computed({
  get() {
    return np.value?.description || ''
  },
  set(description) {
    if (typeof np.value?.description === 'string') {
      np.value = { ...np.value, description }
    }
  },
})

Lihat cara ia berfungsi di sini: https://stackblitz.com/edit/vue3-vite-typescript-starter-wrvbqw?file=src%2FApp.vue

---

Perkara di atas adalah penyelesaian yang sangat umum (apabila anda sebenarnya sangat memerlukan menggunakan pautan pilihan v-model).
Dalam kes anda, alternatif yang lebih mudah (mungkin kerana anda akan 包装在 v-if="np" 中），不使用 v 的可选链接-model sama sekali:
Akan v-model.trim="np?.description" 替换为 v-model.trim="np.description".

Ia akan berkesan.