javascript - Vue watch on v-model property only fired once - Stack Overflow

admin管理员组

文章数量:1359268

I have a Vue ponent very similar to the example reported here:

watch: {
    query(n, o) {

        // Display loading animation
        this.loading = true;

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

Where query is a String variable bound to a text input using v-model:

data() {

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

Everything works fine, except on chrome for android where the watch trigger is only fired once (when query changes from "" to whatever I write).

Any idea?

EDIT:

The problem seems to be related with the v-model directive: I made some experiments with native javascript events and the value of v-model is not updated until I unfocus the input. If anyone's interested here is the binding:

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

Any way to get around this using watch and v-model?

I have a Vue ponent very similar to the example reported here:

watch: {
    query(n, o) {

        // Display loading animation
        this.loading = true;

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

Where query is a String variable bound to a text input using v-model:

data() {

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

Everything works fine, except on chrome for android where the watch trigger is only fired once (when query changes from "" to whatever I write).

Any idea?

EDIT:

The problem seems to be related with the v-model directive: I made some experiments with native javascript events and the value of v-model is not updated until I unfocus the input. If anyone's interested here is the binding:

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

Any way to get around this using watch and v-model?

• javascript
• vue.js
• lodash
• watch
• v-model

Share Improve this question Follow edited Jul 14, 2022 at 1:25 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Jun 28, 2018 at 9:10 SneppySneppy 38677 silver badges2020 bronze badges 3

• It works on the chrome desktop version? – choasia Commented Jun 28, 2018 at 9:24
• Yes, on desktop it works perfectly. Anyway, I made some experiments (using native events such as 'keydown') and the problem is not the watch trigger but the v-model directive not updating query value. I'm updating the question – Sneppy Commented Jun 28, 2018 at 9:36
• The most recent update to Chrome desktop is now in the same boat as the Android version. Unfortunate this happened. I'll have to abandon the v-model if I want to watch that property :( – Craig Commented Sep 3, 2018 at 15:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

It seems to be a bug for v-model. Since v-model is just a syntactic sugar. I think you can use the code below to make it work.

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

本文标签： javascriptVue watch on vmodel property only fired onceStack Overflow