javascript - VueJS $emit 无法将数据推送到父级

Question

因此，我在让 $emit 向父级发送数据时遇到问题。我想要做的是单击提交按钮从输入中获取数据，然后将结果发送给家长。我使用原型(prototype) JSON block 只是为了测试流程，因为我是 Vue 新手。

这里有一些填充文本，因为我需要克服代码过多与文本不足的难题。这里有一些填充文本，因为我需要克服代码过多与文本不足的难题。

TypeError: Cannot read property '$emit' of undefined at eval (SearchBar.vue?e266:42)

<template>
    <div class="searchbox">
         <datepicker v-model="fromdate" placeholder="Start Date" name="fromdate" class="datepicker"></datepicker>
         <datepicker v-model="todate" placeholder="End Date" name="todate" class="datepicker"></datepicker>
         <input type="text" v-model="namesearch" name="namesearch" placeholder="Username/Lastname"/>
         <input type="text" v-model="titlesearch" name="titlesearch" placeholder="Title / Short Desc."/>
         <input type="text" v-model="descsearch" name="descsearch" placeholder="Long Desc"/> 
         <button name="refreshresults" v-on:click="getresults">Do Search</button>
    </div>
</template>

<script>
import Datepicker from 'vuejs-datepicker/dist/vuejs-datepicker.common.js'
import axios from 'axios'
export default {
    name: 'SearchBar',
    components:{
     Datepicker
  },
  data(){
    return {
    fromdate:"",
    todate:"",
    namesearch:"",
    titlesearch:"",
    descsearch:""
    }
  },
  methods:{
      getresults: function(e){
        const searchcriteria = {
            fromdate: this.fromdate,
            todate: this.todate,
            namesearch: this.namesearch,
            titlesearch: this.titlesearch,
            descsearch: this.descsearch
        }
            axios.get('https://jsonplaceholder.typicode.com/todos')
            .then(function (response) {
                // handle success
                console.log(response.data);
                this.$emit('sendingInfo',searchcriteria);
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .then(function () {
                console.log('catchall');
            });

    }
  }
}
</script>

<style>
.vdp-datepicker{
    display:inline-block;
}

INPUT,BUTTON{
    margin:5px;
    display: inline-block;
    padding:5px;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}
</style>

Answer 1

这是因为 axios .then(function() {...}) 回调中的 this 并未引用您的 VueJS 组件。如果您尝试将 this 记录到控制台，您将看到它不再指向您的 VueJS 组件。

既然你用的是ES6，就用箭头函数吧，这样就preserves the lexical this from the enclosing scope :

axios.get('https://jsonplaceholder.typicode.com/todos')
  .then(response => {
      // handle success
      console.log(response.data);
      this.$emit('sendingInfo',searchcriteria);
  })