问题描述
//注意:问题是由 VueFormulate 的 FormulaInput(自定义输入)引起的.
检查代码沙箱中 .sync
的 3 个工作示例
用例
我的应用将多个动态组件注入到一个视图中,然后将每个组件内的多个输入绑定到父级中的数据.
由于 v-model
仅适用于单个值,我发现 .sync
(在 Vue 2.3 之后再次添加)是实现双向的唯一方法将每个子组件中的多个输入绑定到我父组件的数据.
问题
我遵循了 Vue 文档和许多教程中的确切语法,但是当我在我的子组件中使用 :value="value
时,它输入了 undefined
我的数据在控制台中没有错误.
如果我使用 v-model
,它会按预期工作,但是每次按下按键都会在控制台中产生 no-mutate-props
错误.>
预期结果
我希望双向绑定不会在控制台中产生任何 no-mutate-props
错误.
我想我需要某种观察者来检查引用我的道具的值,但这似乎有点混乱,我必须为大约 30 个组件实现它......如果可能.
代码沙盒问题示例
在孩子
//input1
在父级
解决方案
value
不起作用的原因仅仅是因为您发出相同的未更改的 value
传下来了.没有 v-model
,value
没有任何变化,所以没有什么新的东西可以发射回来.
将该输入更改为:
这样,当输入事件发生时,您从输入框中发出一个新值.
// NOTE: Issue was due to VueFormulate's FormulaInput (custom input).
// NOTE: Issue was due to VueFormulate's FormulaInput (custom input).
Check the code sandbox for 3 working examples of .sync
Check the code sandbox for 3 working examples of .sync
Usecase
My app is injecting multiple dynamic components into a view which then binds multiple inputs within each component to data in the parent.
Since v-model
only works on a single value, I've found that .sync
(added again after Vue 2.3) is the only way to two-way bind multiple inputs in each child component to my parent's data.
The Problem
I've followed the exact syntax in the Vue docs and many tutorials, but when I use :value="value
in my child component it inputs undefined
in my data with no errors in console.
If I use v-model
, it works as expected, however produces a no-mutate-props
error in the console for every single keystroke I press.
Expected Result
I expect two-way binding to work without producing any errors of no-mutate-props
in the console.
I think I need some kind of watcher to check a value that references my prop, but that seems a bit messy, and I'd have to implement it for like 30 components... I'd would prefer something cleaner if possible.
Code Sandbox Example of issue
In Child
// input1
<input
type="text"
:value="value" <----- this will work if I make it a v-model, but produces mutation error in console
@input="$emit('update:value', value)"
/>
// input2
<input
type="text"
:value2="value2" <----- again, will work with v-model only
@input="$emit('update:value2', value2)"
/>
props: {
value: {
type: String
},
value2: {
type: String
}
}
In Parent
<component
:is="step.component"
:value.sync="step.value"
:value2.sync="step.value2"
:value3.sync="step.value3"
/>
解决方案 The reason value
didn't work is only because you are emitting the same unchanged value
which is passed down. Without v-model
, nothing changes value
, so there was nothing new to emit back up.
Change that input to:
<input
:value="value"
@input="$emit('update:value', $event.target.value)"
type="text"
step="1"
placeholder="Child Input1 (value)"
/>
This way, when the input event happens, you emit a new value from the input box.
这篇关于Vue .sync 仅适用于 v-model,但会出现变异错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!