在 VUE.JS 上使用带有道具的 v-model [英] Using v-model with a prop on VUE.JS
问题描述
我正在尝试使用来自带有 v-model 的 prop 的数据，以下代码有效，但有警告.
<div><b-form-input v-model="value" @change="postPost()"></b-form-input></模板><脚本>从 'axios' 导入 axios；导出默认{道具: {值:字符串},方法: {邮政(){axios.put('/轨迹/倾角', {正文:this.value}).then(响应 => {}).catch(e => {this.errors.push(e)})}}}
警告说:
避免直接改变 prop，因为每当父组件重新渲染时，值都会被覆盖.相反，使用基于 prop 的值的数据或计算属性.正在改变的 prop:value"
所以我改变了，现在我正在使用警告所说的数据.
<div><b-form-input v-model="_value" @change="postPost()"></b-form-input></模板><脚本>从 'axios' 导入 axios；导出默认{道具: {值:字符串},数据() {返回 {_value: this.value}},方法: {邮政(){axios.put('/轨迹/倾角', {正文:this._value}).then(响应 => {}).catch(e => {this.errors.push(e)})}}}
所以现在代码不起作用并且警告说:
属性或方法_value"未在实例上定义，但在渲染过程中被引用.确保在数据选项中声明响应式数据属性"
知道如何修复第一个代码以抑制警告吗?(或者关于如何修复第二个代码的一些想法?)
观察:b-form-input 这不是我的组件，这是来自 Boostrap-Vue 的文本输入 (b-form-input 文档)
Bert 解决了您的直接问题，但我认为您也应该知道您的方法有点偏离.由于最终您将新值发送到 postPost，因此您实际上并不需要修改您的本地副本.使用发送到 change 处理程序的 event 对象从输入中获取当前值.
代替v-model，只需使用:value，并且在指定change 处理程序时不要包含调用括号.
<div><b-form-input :value="value" @change="postPost"></b-form-input></模板><脚本>从 'axios' 导入 axios；导出默认{道具: {值:字符串},方法: {邮政(事件){axios.put('/轨迹/倾角', {正文:event.target.value}).then(响应 => {}).catch(e => {this.errors.push(e)})}}}
I'm trying to use a data coming from a prop with v-model, the following code works, but with a warning.
<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>
The warning says:
"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: "value"
So I changed and now I'm using a data as the warning says.
<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)
})
}
}
}
So now the code it's not working and the warning says:
"Property or method "_value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option"
Any idea how to fix the first code to suppress the warning? (or some idea on how to fix the second code?)
Obs.: b-form-input it's not my componente, this is the Textual Input from Boostrap-Vue (Doc for b-form-input)
Bert addresses your direct issue, but I think you should also know that your approach is a bit off. Since ultimately you are sending the new value to postPost, you don't really need to modify your local copy. Use the event object that is sent to the change handler to get the current value from the input.
Instead of v-model, just use :value, and don't include the invocation parentheses when specifying the change handler.
<template>
<div>
<b-form-input :value="value" @change="postPost"></b-form-input>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: {
value: String
},
methods: {
postPost(event) {
axios.put('/trajectory/inclination', {
body: event.target.value
})
.then(response => {
})
.catch(e => {
this.errors.push(e)
})
}
}
}
</script>
这篇关于在 VUE.JS 上使用带有道具的 v-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
