Búsqueda de sitios web

typescript - el decorador @model de vue-property-decorator genera vue-warn: Evita mutar

Uso TypeScript con esta biblioteca. Y tengo el siguiente código en el archivo HomePage.vue :

<template>
    <div>Write something x: <input v-model="someName" type="text"></div>
</template>

<script lang="ts">
import { Component, Model, Vue } from "vue-property-decorator";

@Component
export default class HomePage extends Vue {
    @Model() someName: string;
}
</script>

Después de la compilación, ejecuta en el navegador y escribe algo en el cuadro de entrada, obtengo en la consola de Chrome la siguiente advertencia de Vue:

[Advertencia de Vue]: Evite modificar una propiedad directamente ya que el valor se sobrescribirá cada vez que el componente padre se vuelva a renderizar. En su lugar, use una propiedad de datos o computada basada en el valor de la propiedad. Propiedad que se está modificando: "someName"

¿Alguna idea de cómo solucionar este problema?

Respuesta #1

TL;DR

Soy nuevo en Vue (vengo de React), pero por lo que entiendo la respuesta de arriba no está mal, aunque no responde a la pregunta de cómo usar el decorador @Model. Provide e Inject es un exceso para pasar props de un componente padre a un hijo. La documentación no es clara, así que me rompí mucho la cabeza con esto. Pero recuerda que el paquete se refiere a props. Por lo tanto, @Prop, @PropSync y @Model deberían estar en el componente hijo. Esto es lo que hice y no me dio ese horrible error en la consola. Componente padre:

<template>
  <div>
     <input type="text" v-model="modelText" />
    <Child 
      :modelText="modelText"
    />
  </div>
</template>

<script lang="ts">
import Component from 'vue-class-component';
import Vue from 'vue';
import Child from './Child.vue';

@Component({
  components: {
    Child,
  }
})
export default class Parent extends Vue {
  private modelText: string = 'model-text';
}
</script>

Y para el componente hijo:

<template>
    <div>
      @Model: {{modelText}}
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, PropSync, Model } from 'vue-property-decorator';

@Component({

})
export default class Child extends Vue {
  @Model('input', { type: String }) modelText!: string;
}
</script>

Respuesta #2

Desde la v. 9.1.2, view-property-decorator ahora admite el decorador @VModel.

Dónde

import { Vue, Component, VModel } from 'vue-property-decorator'

@Component
export default class CustomComponent extends Vue {
  @VModel() name!: string
}

hará posible usar la vinculación de datos bidireccional con name dentro del componente y v-model="..." desde el exterior. ¡Sin las molestas advertencias!

https://github.com/kaorun343/vue-property-decorator#-vmodelpropsargs-propoptions-decorator

Artículos relacionados