Vuejs + typeahead this - 未定义

Question

我正在尝试制作一个带有自动完成功能的表单。当用户键入姓名的一部分时，提前输入会建议我们数据库中的人。如果用户选择了我想要从自动建议中填写完整表格的建议之一。

一切正常，但我尝试将建议中的值分配给数据对象。当我记录 this.newReviewer 时，我得到 this 未定义...这是我的代码：

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'
              }
        });

            $('#last_name')
            .typeahead({
                minLength: 2,
                highlight: true,
                hint: true
            }, 
            {
                displayKey: 'last_name',
                templates: {
                    suggestion: function(ersContacts) {
                        return (

                        '<div>' +
                            '<h3>' 
                            + ersContacts.title + ' '  
                            + ersContacts.first_name + ' ' 
                            + ersContacts.last_name 
                            + '</h3>'
                            + '<p class="uk-text-muted">' 
                            + ersContacts.city + ' ' 
                            + ersContacts.country 
                            + '</p>' +
                        '</div>'

                        )
                    }
                },
                source: ersContacts
            })
            .on('typeahead:select', function(e, suggestion){

                console.log(this.newReviewer);
                this.newReviewer.last_name.push(suggestion.last_name);
                this.newReviewer.email.push(suggestion.email);



            })
            .bind(this);

    },

    computed:{
        //errors: function() {
        //  for(var key in this.newReviewer) {
        //      if (! this.newReviewer[key]) return true;
        //  }

        //  return false;
        //}
    },

    methods: {
        fetchInvitedReviewers: function() {
            this.$http.get('api', function(response) {
                this.$set('reviewers', response.reviewers);
                this.$set('quantity', response.quantity); 
            });
        },

        onSubmitForm: function(e){
            e.preventDefault();
            var reviewer = this.newReviewer;
            //add new reviewer to reviewers array
            this.reviewers.push(reviewer);

            //reset input values
            this.newReviewer = {title:'', last_name: '', first_name: '', email:'', ers_id:''}
            //substract one to the quantity

            this.quantity -= 1 ;
            //sent post ajax request
            this.$http.post('api/store', reviewer)

            //show success and count how many left

            if(this.quantity <= 0) {
            this.submitted = true;
            }
        }



    },

    validator: {
            validates: {
                email: function (val) {
                return /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
                }
            }   
    }


});

Answer 1

找到...

抱歉各位。这个

    })
    .bind(this);

应该是

    }
    .bind(this));

Vuejs + typeahead this - 未定义

Vuejs + typeahead this - undefined

javascript

typeahead.js

vue.js