Input value not being set with v-model

Question

I'm trying to set a the value in an input with Vue by using a v-model. I am using the Vue Typeahead library. The issue I'm having is that when I click on an item that I want to select I fire an Onhit method, in this method I change the value of query to update the input value. Inside the Onhit() method this does not work however it will change if I change it in the created() method.

I can confirm that when I console.log() this.query I am getting the new value. It's just not being dynamically updated.

<template>
    <div>
        <div class="input-group">
            <input type="text"
                class="form-control"
                autocomplete="off"
                v-model="query"
                @keydown.down="down"
                @keydown.up="up"
                @keydown.enter="hit"
                @keydown.esc="reset"
                @blur="reset"
                @input="update"
                v-bind:placeholder="selectedLocation"/>

            <span class="input-group-addon">
                <i class="fa fa-spinner fa-spin" v-if="loading"></i>
                <template v-else>
                    <i class="fa fa-search" v-show="isEmpty"></i>
                    <i class="fa fa-times" v-show="isDirty" @click="reset"></i>
                </template>
            </span>
        </div>

        <!-- the list -->
        <ul v-show="hasItems">
            <li v-for="(item, $item) in items" :class="activeClass($item)" @mousedown="hit" @mousemove="setActive($item)">
                <span v-html="item.city"></span> 
                <div class="meta-location-data"><span v-html="item.region"></span><span>, </span><span v-html="item.country"></span></div>
            </li>
        </ul>
    </div>
</template>


<script>
import VueTypeahead from 'vue-typeahead';

export default {
extends: VueTypeahead, 

props: ['selectedLocation'],

create() {
    // This works
    this.query = 'test';
}

data () {
    return {
        // The source url
        // (required)
        src: '/api/test/',

        // The data that would be sent by request
        // (optional)
        data: {},

        // Limit the number of items which is shown at the list
        // (optional)
        limit: 5,

        // The minimum character length needed before triggering
        // (optional)
        minChars: 3,

        // Highlight the first item in the list
        // (optional)
        selectFirst: false,

        // Override the default value (`q`) of query parameter name
        // Use a falsy value for RESTful query
        // (optional)
        queryParamName: false
    }
},

methods: {
    // The Item that the user clicks on (required)
    onHit (item) {
        // This does not work :(
        this.query = item.city;
        this.$emit('location-was-changed', item);
    },

    // The callback function which is triggered when the response data are received (optional)

    prepareResponseData (data) {
        let testData = [{
                city: 'Zamin Sukhteh',
                region: 'Khuzestan',
                country: 'Iran'
            },
            {
                city: 'Azreh-ye ‘Abbasabad',
                region: 'Khuzestan',
                country: 'Iran'
            },
            {
                city: 'Avondale',
                region: 'Auckland',
                country: 'New Zealand'
            },
            {
                city: 'Elsio',
                region: '',
                country: 'Fiji'
        }];

        return testData
            .filter((location) => {
                // Just get the data we want
                return location.country.includes(this.query)
                || location.city.includes(this.query)
                || location.region.includes(this.query)
            });
    }
}
}
</script>

<style scoped src="./typeahead.scss"></style>

I see a couple handlers in your template that would call a method named hit but nothing appears to be calling your onHit method — thanksd
– thanksd, Commented Sep 26, 2017 at 21:37
@thanksd Hi, That part is handled in the library. This code extends it under 'export default'. I double checked to make sure and that function is being called when I select something in the drop down and I can see a console.log. — Tom Headifen
– Tom Headifen, Commented Sep 26, 2017 at 21:41

Tom Headifen · Accepted Answer · 2017-09-26 22:09:43Z

1

Found the issue, The vue-typeahead library calls a reset function after the onhit fires which resets the query back to null.

You can fix this by adding

reset: function reset() {
    this.items = [];
    this.loading = false;
}

To your methods (it overwrites the default one). You may also be able to assign a different variable to the v-model.

answered Sep 26, 2017 at 22:09

Tom Headifen

2,0361 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Input value not being set with v-model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related