The @model decorator in vue-property-decorator is known to trigger a warning in Vue: It is advised to

Question

The @model decorator in vue-property-decorator is known to trigger a warning in Vue: It is advised to

I'm currently using TypeScript in conjunction with this library. In my file HomePage.vue, I have the following code:

<template>
    <div>Enter text here: <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>

Upon compilation and running in the browser, when I enter something in the input box, I encounter the following Vue warning in Chrome console:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "someName"

Does anyone have a solution to tackle this issue?

typescript annotations vuejs2

Answer 1

Answer №1

Summary:

Transitioning from React to Vue, I found the previous answer to be somewhat helpful but lacking in addressing the specific query regarding how to utilize the @Model decorator. While Provide and Inject can work for passing props between parent and child components, it may be excessive in certain scenarios. The documentation on this topic seemed ambiguous, leading me to spend a considerable amount of time pondering over it. Nonetheless, it's important to note that when dealing with packages referring to props, annotations like @Prop, @PropSync, and @Model are typically applied at the child component level. Here is my approach to resolving the issue without encountering any unpleasant console errors. Starting with the parent component:

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

Moving on to the child component:

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

Answer 2

Summary:

Transitioning from React to Vue, I found the previous answer to be somewhat helpful but lacking in addressing the specific query regarding how to utilize the @Model decorator. While Provide and Inject can work for passing props between parent and child components, it may be excessive in certain scenarios. The documentation on this topic seemed ambiguous, leading me to spend a considerable amount of time pondering over it. Nonetheless, it's important to note that when dealing with packages referring to props, annotations like @Prop, @PropSync, and @Model are typically applied at the child component level. Here is my approach to resolving the issue without encountering any unpleasant console errors. Starting with the parent component:

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

Moving on to the child component:

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

Answer 3

Answer №2

Starting from version 9.1.2, the view-property-decorator now includes support for the @VModel decorator.

Here is an example:

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

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

This setup enables two-way data binding with the name property within the component, and allows the use of v-model="..." externally without any pesky warnings!

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

Answer 4

Starting from version 9.1.2, the view-property-decorator now includes support for the @VModel decorator.

Here is an example:

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

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

This setup enables two-way data binding with the name property within the component, and allows the use of v-model="..." externally without any pesky warnings!

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

Answer 5

Answer №3

When using v-model, it is important to utilize properties that are explicitly defined within the data section.

Instead of the shorthand @Model, consider using @Provide in order to properly define the necessary data properties.

@Provide() foo = 'foo'

For more information, visit https://github.com/kaorun343/vue-property-decorator

Answer 6

When using v-model, it is important to utilize properties that are explicitly defined within the data section.

Instead of the shorthand @Model, consider using @Provide in order to properly define the necessary data properties.

@Provide() foo = 'foo'

For more information, visit https://github.com/kaorun343/vue-property-decorator

The @model decorator in vue-property-decorator is known to trigger a warning in Vue: It is advised to

Answer №1

Answer №2

Answer №3

Similar questions

In Angular 2, I am having trouble reaching the properties of an object nested inside another object

How can I run a Redis Server on a port other than the default 6379 port using ioredis?

Troubleshooting issue with getServerSideProps not functioning in Next.js while utilizing Next-redux-wrapper and TypeScript

Challenges when transitioning to TypeScript within a React project

Guide to including spinner in React JS with TypeScript

Steps to create an Executable from a complete Typescript project

Improving the management of user input in Lit components

Leveraging Jackson annotations in a derived class

Updating a value in one input field triggers changes in several other input fields in Angular 6

Best practices and distinctions when it comes to typing in TypeScript functions

What is the best way to finalize the pre-departure confirmation for react components, covering both class components and function components?

Utilizing the <HTMLSelectElement> in a Typescript project

How to Close Keyboard on iOS and Android using Angular 4 TypeScript

Items in the Vue.Draggable display can be arranged on both the left and right

Passing parameters in React classes is a crucial aspect of creating

Trouble arises when trying to navigate to a new page from ion-tabs within Ionic 2

Generate a dynamic interface using properties and options provided in a JavaScript object

What is the best way to implement line-through text decoration for a list item when it is clicked in an Angular application? Additionally, how can the "completed" value in

Can you tell me the data type of a Babel plugin parameter specified in TypeScript?

Exploring object traversal in Typescript