Question

假设我有一个像这样绑定的输入元素：

<input :value="somedata">

用户在输入中键入内容，由于我没有使用v-model或通过处理程序更改somedata，因此元素的值现在与somedata不同。这就是我想要的，但我也想拥有以下功能：

在不更改somedata的值的情况下，我希望能够通知元素，以便再次将其值设置为somedata。类似于淘汰赛的notifySubscribers()或valueHasMutated()

这可能在vue.js吗？

更新：此处明确说明问题： https://jsfiddle.net/gtezer5c/3/

Answer 1

我不确定我是否正常关注，但我会试一试。

我认为你想要的只是在他们的＆＃34;临时＆＃34;价值满足某种条件。以下是我的想法。

<div id="app">
  <input v-model="tempValues.one">
  <input v-model="tempValues.two">
  <input v-model="tempValues.three">

  <pre>{{ values }}</pre>
  <pre>{{ tempValues }}</pre>
</div>

然后，在我的组件中，我会看到tempValues并且仅在满足条件时更新values。

new Vue({
  el: '#app',
  data: {
    values: {
      one: '',
      two: '',
      three: '',
    },
    tempValues: {},
  },
  created () {
    // Create the tempValues based on the real values...
    this.tempValues = Object.assign({}, this.values)
  },
  methods: {
    updateValues (tempValues) {
      // Only updating the values if all the tempValues are longer than 3 characters...
      var noneEmpty = Object.values(tempValues).every((value) => value.length > 3)
      if (noneEmpty) {
        this.values = Object.assign({}, tempValues)
      }
    },
  },
  watch: {
    // Watch tempValues deeply...
    tempValues: {
      handler (tempValues) {
        this.updateValues(tempValues)
      },
      deep: true,
    },
  },
})

这是一个快速演示：https://jsfiddle.net/crswll/ja50tenf/

Answer 2

根据您的需求解释确切的要求和验收标准有点困难，我认为比尔的解决方案就是您所追求的，但经过所有更新和澄清，我想我更了解您的内容我试图完成：简而言之，我认为你需要一种通用的方法来获得一个可以保存一个值但可以独立地恢复到其他值的输入。

请查看this CodePen。我相信它正在提供你想要做的事情。它允许您创建input元素作为revertable组件，可以选择传递默认值。对该输入的任何更改都由具有value数据属性的组件维护。它不会观察/拉入任何lastKnownGood类型的值，因为任何反转都将从外部推送到组件中。

在revertable组件的外部，您可$emit revert个revertable事件，其新值将导致所有revertable个组件或单个const revertBus = new Vue()要恢复的组件（具有匹配的ID）。

我觉得它主要是一个干净的解决方案（假设我正确理解了这些要求），除了在VueJS 2中我们必须使用一个独立的共享Vue对象来在没有父子关系时传递事件。所以你会看到：

revertable

在演示的全局范围中定义。 revertBus.$on('revert', (value, id) => { ... }组件将使用它来接收传入的消息，如下所示：

revertBus.$emit('revert', this.reversionValue, targetId)

并且触发消息的控制Vue对象将使用它：

null

您还可以使用revertable值发出事件，以使revertBus.$emit('revert', null, targetId)组件将其值重置为其初始默认值：

同样，它是一个主要干净的解决方案，虽然它可能与你想要完成的内容完全吻合，但我希望它至少可以帮助你更接近。

Answer 3

yourvar.__ob__.dep.notify()

适用于对象和数组

Answer 4

是的，您应该可以在v-on:input的帮助下完成此操作。您可以在input上调用函数，并在此函数中设置检查和更新的逻辑：

<input :value="somedata" v-on:input="yourMethod">

事实上，如果你看一下documentation，<input v-model="something">就是语法糖：

<input v-bind:value="something" v-on:input="something = $event.target.value">

所以不要将变量something分配给输入的值，而是将逻辑放在那个位置。

在vue.js中，可以通知“观察者”从观察数据中重新获取值，而不改变观察数据的值

4 个答案: