how to bind component data to a value from the prop

Question

How can I bind the value searchString in my Vue component to the value of item in my html template that this component uses? I want to send this value to the method I am calling in my Ajax-call.

Vue:

Vue.component('user-container-component', {
    props: {
        prop: null
    },
    template: '#user-container-template',
    data: function () {
        return {
            open: false,
            searchString: ''
        }
    },
    methods: {
        toggle: function () {
            this.open = !this.open;
        },
        dbSearch_method: function () {
            var self = this;
            $.ajax({
                url: 'Home/LocalSearch',
                type: 'GET',
                data: {id: self.searchString},
                success: function (response) {
                    self.$emit('search-results-fetched', response);
                },
                error: function () {
                    alert('error');
                }
            });
        }
    }
})

html:

<ul class="no-bullets" v-show="open" v-for="item in prop">
    <li><button class="btn btn-link bold" v-on:click="dbSearch_method">{{item}}</button></li>
</ul>

Answer 1

With vue you can pass a parameter in the on-click events to your dbSearch_method like:

<ul class="no-bullets" v-show="open" v-for="item in prop">
    <li><button class="btn btn-link bold" v-on:click="dbSearch_method(item)">{{item}}</button></li>
</ul>

And in your javascript:

dbSearch_method: function (item) {

This way you have the {{item}} object in your search function and you can access to it properties.

You can take a look at here . Hope it helps!