Как использовать v-модель Vue3 + TypeScript для текстового поля? "ОШИБКА: недопустимая цель назначения"
Полная ошибка:
[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>
ЗДЕСЬ полное воссоздание ошибки:
Любая помощь здесь приветствуется <3
Эта проблема довольно запутанная.
Ваш код в порядке, но шаблон, похоже, не может обрабатывать необязательный оператор цепочки в v-model = "np?.description". Это может быть связано с версиями Vite/компиляторов, которые использует stackblitz. Если вы удалите оператор, он компилируется нормально.
Ответы 1
Вы не можете использовать двойную привязку (v-model) с дополнительной цепочкой (np?.description). Двойное связывание означает геттер и сеттер. Что, как вы ожидаете, установит сеттер, когда np будет ложным? Я знаю, что вы завернули его в v-if, но необязательная цепочка сообщает v-model, что структура целевого объекта, возможно, undefined, и это недопустимая цель присваивания.
Один из способов сделать это — создать вычисляемый description, где вы указываете, как установить np.description, когда текущее значение np позволяет это сделать:
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).
Более простая альтернатива в вашем случае (возможно, потому что вы обернули <textarea> в v-if = "np") вообще не использует необязательную цепочку с v-model:
заменить v-model.trim = "np?.description" на v-model.trim = "np.description".
Это сработает.
Да, это было так, большое спасибо. Я не сомневался в ?, потому что, когда я нажимал «вкладку» в своем редакторе для автозаполнения, там помещалось ?. я чувствую себя глупо
Не! JavaScript сложен по своей природе. Я узнаю что-то об этом каждый день, и я занимаюсь этим уже довольно давно. Удачного кодирования!
возможно, стоит отметить ту же ошибку, если вместо нее используется
const np = reactive<>().