Question

我有一些类似下面的代码：

<some_component v-model="some_value" />
{{ some_value }}

在我的脚本代码中，我有以下内容：

 ...
 data() {
     return {
         some_value: 'initial'
     };
 },
 ...
 watch: {
     some_value(new_value, old_value) {
         // Small subset of code, actual code does much more than this
         if (new_value === 'some_new_value') {
              this.some_value = 'can not use that value';
         }
     }
 },
 ...

所以一切似乎都运转正常，直到我试图改变我在观察者本身内观察的价值。我希望观察者再次开火，但它并没有，虽然v-model的值发生了变化，但它在UI中没有变化。

我尝试在更改之前和之后使用this.$forceUpdate()，但它似乎没有用。

谁能告诉我我在这里做错了什么？

Answer 1

您不应该在其监视程序中更新正在监视的值，但是如果没有其他选择，则可以使用$nextTick

some_value(new_value, old_value) {
  // Small subset of code, actual code does much more than this
  if (new_value === 'some_new_value') {
    this.$nextTick(() => {
      this.some_value = 'can not use that value';
    })
  }
}

另一种方法（也是我认为最好的方法）是直接覆盖v-model。如您所知，v-model="some_value"是:value="some_value"和@input="some_value=$event"的简写。这样您就可以做自己想做的事情：

<some-component
  :value="some_value" 
  @input="some_value=some_method($event)"
/>

在观察者中更改观察者值

1 个答案: