[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. Если вы удалите оператор, он компилируется нормально.
Вы не можете использовать двойную привязку (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<>()
.