【问题标题】:Vue watch on v-model property only fired onceVue 对 v-model 属性的监视只触发了一次
【发布时间】:2018-12-07 07:15:46
【问题描述】:

我有一个与here 报告的示例非常相似的 Vue 组件:

watch: {
    query(n, o) {

        // Display loading animation
        this.loading = true;

        // Search debounced
        this.debouncedSearchUser();
    }
},

其中query 是使用v-model 绑定到文本输入的字符串变量:

data() {

    return {
        query: "",
        loading: false,
        results: []
    }
},

一切正常,除了在 chrome for android 上手表触发器只触发一次(当 query"" 更改为我写的任何内容时)。

有什么想法吗?

编辑:

问题似乎与v-model 指令有关:我对原生javascript 事件进行了一些实验,直到我取消输入焦点后v-model 的值才会更新。如果有人对这里的绑定感兴趣:

<input v-model="query" class="input-text-light pad-s-m f-m"/>

有什么方法可以使用 watch 和 v-model 来解决这个问题?

【问题讨论】:

  • chrome桌面版能用吗?
  • 是的,在桌面上它可以完美运行。无论如何,我做了一些实验(使用本机事件,例如'keydown'),问题不在于手表触发器,而是v-model 指令没有更新query 值。我正在更新问题
  • Chrome 桌面版的最新更新现在与 Android 版本在同一条船上。不幸发生了这件事。如果我想观看该属性,我将不得不放弃 v-model :(

标签: javascript vue.js lodash watch v-model


【解决方案1】:

这似乎是v-model 的错误。因为v-model 只是一个语法糖。 我认为您可以使用下面的代码使其工作。

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

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2018-12-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-07
  • 2023-02-03
  • 2021-11-09
  • 2020-07-15
相关资源
最近更新 更多