简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Comment utiliser le v-model Vue3 + TypeScript sur un champ de texte ? "Erreur : objectif d'allocation non valide"

Totalement faux : 

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

C'est 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>

Voici une reproduction complète de l'erreur :

Merci pour toute aide ici <3

Cette question est plutôt déroutante.

P粉343408929P粉343408929297 Il y a quelques jours457

répondre à tous(1)je répondrai

  • P粉729436537

    P粉7294365372023-12-28 00:23:57

    Vous ne pouvez pas combiner la double reliure (v-model) 与可选链接 (np?.description). La double liaison signifie getter et setter. Que voulez-vous que le setter définisse lorsque np est faux ? Je sais que vous l'encapsulez dans un v-if , mais le lien facultatif indique à v-model que la structure de l'objet cible peut être indéfinie, ce qui est une cible d'affectation non valide.

    Une solution consiste à créer un description，您可以在其中指定当np的当前值时如何设置np.description > calculé qui permet : 

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

    Découvrez comment cela fonctionne ici : https://stackblitz.com/edit/vue3-vite-typescript-starter-wrvbqw?file=src%2FApp.vue

    Ce qui précède est une solution très générale (quand vous avez réellement vraiment besoin d'utiliser le lien facultatif de ). v-model Dans votre cas, une alternative plus simple (probablement parce que vous le feriez
     :