我正在尝试使用来自带有 v-model 的道具的数据,以下代码有效,但带有警告。
<template>
<div>
<b-form-input v-model="value" @change="postPost()"></b-form-input>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: {
value: String
},
methods: {
postPost() {
axios.put('/trajectory/inclination', {
body: this.value
})
.then(response => {
})
.catch(e => {
this.errors.push(e)
})
}
}
}
</script>
警告说:
“避免直接改变道具,因为每当父组件重新渲染时,该值将被覆盖。相反,使用基于道具值的数据或计算属性。道具被改变:“值”
所以我改变了,现在我正在使用警告所说的数据。
<template>
<div>
<b-form-input v-model="_value" @change="postPost()"></b-form-input>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: {
value: String
},
data() {
return {
_value: this.value
}
},
methods: {
postPost() {
axios.put('/trajectory/inclination', {
body: this._value
})
.then(response => {
})
.catch(e => {
this.errors.push(e)
})
}
}
}
所以现在代码不起作用,警告说:
“属性或方法“_value”未在实例上定义,但在渲染期间被引用。确保在数据选项中声明反应数据属性“
知道如何修复第一个代码以抑制警告吗? (或有关如何修复第二个代码的一些想法?)
观察:b-form-input 它不是我的组件,这是来自 Boostrap-Vue 的文本输入( b-form-input 的文档)
原文由 user3142 发布,翻译遵循 CC BY-SA 4.0 许可协议
Bert 解决了您的直接问题,但我认为您也应该知道您的方法有点偏离。由于最终您将新值发送到
postPost
,因此您实际上不需要修改本地副本。使用发送到change
处理程序的event
对象从输入中获取当前值。而不是
v-model
,只需使用:value
,并且在指定change
处理程序时不要包含调用括号。