laravel 是否可以从 Vue 组件中的方法更改 props 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43701175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to change props value from method in Vue component?
提问by Rubanraj Ravichandran
I have a component and i am passing value 543 to props :prop-room-selected,
我有一个组件，我将值 543 传递给 props :prop-room-selected，
<navigation-form :prop-room-selected='543'>
</navigation-form>
Now, From a button click, i am calling the function updateCoachStatus to change the value of propRoomSelected, but the props value is not updating.
现在，通过单击按钮，我正在调用函数 updateCoachStatus 来更改 propRoomSelected 的值，但道具值未更新。
{
template: '#navigation-form',
props: ['propRoomSelected'],
data: function () {
return {
roomSelected: this.propRoomSelected,
}
},
methods:{
updateCoachStatus: function(event){
this.propRoomSelected = 67;
}
}
}
I dont know how to change the value of props from function. Is it possible in Vue to update the value of props??
我不知道如何从函数中改变 props 的值。Vue 中是否可以更新 props 的值？
回答by Bert
What you are doing will throw a warning in Vue (in the console).
你正在做的事情会在 Vue 中（在控制台中）抛出一个警告。
[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: "propRoomSelected"
[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，值都会被覆盖。相反，根据道具的值使用数据或计算属性。道具正在变异：“propRoomSelected”
The value will actually change insidethe component, but not outsidethe component. The value of a parent property cannot be changed inside a component, and, in fact, the updated value will be lostif the parent re-renders for any reason.
该值实际上会在组件内部更改，但不会在组件外部更改。父属性的值不能在组件内部更改，实际上，如果父因任何原因重新渲染，更新的值将丢失。
To update the parent property, what you should do is $emitthe updated value and listen for the change in the parent.
要更新父属性，您应该做的是$emit更新值并监听父属性的变化。
Vue.component("navigation-form",{
template: '#navigation-form',
props: ['propRoomSelected'],
data: function () {
return {
roomSelected: this.propRoomSelected,
}
},
methods:{
updateCoachStatus: function(event){
this.$emit("update-room-selected", 67) ;
}
}
})
And in your parent template listen for the event
并在您的父模板中监听事件
<navigation-form :prop-room-selected='propRoomSelected'
@update-room-selected="onUpdatePropRoomSelected">
</navigation-form>
Here is an example.
这是一个例子。
This is a common pattern and Vue implemented a directive to make it slightly easier called v-model. Here is a component that supports v-modelthat will do the same thing.
这是一种常见的模式，Vue 实现了一个指令，使其更容易调用v-model. 这是一个支持v-model做同样事情的组件。
Vue.component("navigation-form-two",{
template: '#navigation-form-two',
props: ['value'],
data: function () {
return {
roomSelected: this.value,
}
},
methods:{
updateCoachStatus: function(event){
this.$emit("input", 67) ;
}
}
})
And in the parent template
并在父模板中
<navigation-form-two v-model="secondRoomSelected">
Essentially, for your component to support v-modelyou should accept a valueproperty and $emitthe inputevent. The example linked above also shows that working.
从本质上讲，你的组件来支持，v-model你应该接受一个value特性和$emit该input事件。上面链接的示例也显示了它的工作原理。
