Vue .sync 仅适用于 v-model，但会出现变异错误 [英] Vue .sync only works with v-model, but gives mutation error

问题描述

//注意:问题是由 VueFormulate 的 FormulaInput(自定义输入)引起的.

检查代码沙箱中 .sync 的 3 个工作示例

用例

我的应用将多个动态组件注入到一个视图中，然后将每个组件内的多个输入绑定到父级中的数据.

由于 v-model 仅适用于单个值，我发现 .sync(在 Vue 2.3 之后再次添加)是实现双向的唯一方法将每个子组件中的多个输入绑定到我父组件的数据.

问题

我遵循了 Vue 文档和许多教程中的确切语法，但是当我在我的子组件中使用 :value="value 时，它输入了 undefined我的数据在控制台中没有错误.

如果我使用 v-model，它会按预期工作，但是每次按下按键都会在控制台中产生 no-mutate-props 错误.>

预期结果

我希望双向绑定不会在控制台中产生任何 no-mutate-props 错误.

我想我需要某种观察者来检查引用我的道具的值，但这似乎有点混乱，我必须为大约 30 个组件实现它......如果可能.

代码沙盒问题示例

在孩子

//input1<输入类型=文本":值=值"<----- 如果我将其设为 v 模型，这将起作用，但会在控制台中产生突变错误@input="$emit('update:value', value)";/>//输入2<输入类型=文本":value2=value2"<----- 再次，仅适用于 v-model@input="$emit('update:value2', value2)";/>道具: {价值: {类型:字符串},值2:{类型:字符串}}

在父级

<组件:is="step.component":value.sync="step.value";:value2.sync="step.value2";:value3.sync="step.value3";/>

解决方案

value 不起作用的原因仅仅是因为您发出相同的未更改的 value传下来了.没有 v-model，value 没有任何变化，所以没有什么新的东西可以发射回来.

将该输入更改为:

这样，当输入事件发生时，您从输入框中发出一个新值.

// NOTE: Issue was due to VueFormulate's FormulaInput (custom input).

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，但会出现变异错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！