Is there a way to connect the searchString value in my Vue component to the item value in the html template it uses? I need to pass this value to the method called in my Ajax request.
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>