我使用带有this lib的typescript。我在文件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>
编译完成后,在浏览器中运行并在输入框中输入内容,然后在vue warrning后进入chrome控制台:
[Vue警告]:避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖。而是根据prop的值使用数据或计算属性。支持被改变:&#34; someName&#34;
知道如何解决这个问题吗?
答案 0 :(得分:2)
从9.1.2版开始,view-property-decorator
现在支持@VModel
装饰器。
哪里
import { Vue, Component, VModel } from 'vue-property-decorator'
@Component
export default class CustomComponent extends Vue {
@VModel() name!: string
}
将可以使用双向数据绑定,其中组件内部为name
,外部为v-model="..."
。没有烦人的警告!
https://github.com/kaorun343/vue-property-decorator#-vmodelpropsargs-propoptions-decorator
答案 1 :(得分:1)
对于v-model,您应该使用data
中定义的属性。
我发现您使用的是速记@Model
,但您需要@Provide
来定义data
属性。
@Provide() foo = 'foo'
答案 2 :(得分:1)
TL:DR
我是Vue的新手(来自React),但是据我了解,上面的答案没有错,但是它没有回答如何使用@Model装饰器的问题。 Provide and Inject是将道具从父母传递给孩子的一种过分杀伤力。文档尚不清楚,所以我在这方面花了很多力气。但是请记住,该包引用了props
。因此@Prop
,@ PropSync
和@Model
应该在子组件上。这是我所做的,并且没有抛出该可怕的控制台错误。父组件:
<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>
对于子组件:
<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>