I'm currently working on creating a form with autocomplete functionality. The goal is to have a user input part of a name, which will then trigger suggestions from our database. Upon selecting a suggestion, I want the entire form to be populated with the auto-suggested data.
While everything is functioning properly, I'm facing difficulties in assigning the value from the suggestion to the data object. Whenever I log the this.newReviewer, it shows that this is undefined. Below is the snippet of my code:
var Vue = require('vue')
var validator = require('vue-validator')
var resource = require('vue-resource')
Vue.use(validator)
Vue.use(resource)
var token = $('#token').attr('value');
Vue.http.headers.common['X-CSRF-TOKEN'] = token;
new Vue({
el:'#invite',
data: {
newReviewer: {
title:'',
last_name:'',
first_name:'',
email:'',
ers_id:'null'
},
reviewers: {},
quantity: {},
submitted: false,
},
ready: function(){
this.fetchInvitedReviewers();
console.log(this.newReviewer);
var ersContacts = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'api/search/%QUERY',
wildcard: '%QUERY'
}
});
// More code can go here...
},
computed:{
// Additional logic could be implemented here...
},
methods: {
fetchInvitedReviewers: function() {
// AJAX request to retrieve reviewers
},
onSubmitForm: function(e){
// Method to handle form submission
}
},
validator: {
validates: {
email: function (val) {
return // Regular expression for email validation
}
}
}
});