Question

因此，在让$emit能够将数据发送给父级方面遇到了问题。我希望做的是单击“提交”按钮，从输入中获取数据，然后将结果发送给父级。我正在使用原型JSON块只是为了测试流程，因为我是Vue的新手。

这里有一些填充文本，因为我需要克服过多代码而不是文本不足的麻烦。这是一些填充文本，因为我需要克服过多代码而不是文本不足的麻烦。

TypeError：无法读取未定义的属性“ $ emit” 在评估时（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 this回调中的.then(function() {...})没有引用您的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);
  })

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

1 个答案: