VueJS $ emit не работает, чтобы передать данные родителю - PullRequest
Новая
       48

VueJS $ emit не работает, чтобы передать данные родителю

0 голосов
/ 03 марта 2019

Итак, у меня проблема с получением $emit для отправки данных родителю.Что я хочу сделать, так это нажать кнопку «Отправить», взять данные из входных данных и затем отправить результаты родителю.Я использую прототип блока JSON только для проверки потока, поскольку я новичок в Vue.

Вот небольшой текст наполнителя, так как мне нужно преодолеть кучу слишком большого количества кода и недостаточно текста,Вот некоторый текст-заполнитель, поскольку мне нужно преодолеть кучу слишком большого количества кода и недостаточно текста.

TypeError: Невозможно прочитать свойство '$ emit' undefined на 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>

1 Ответ

0 голосов
/ 03 марта 2019

Это потому, что this в вашем обратном вызове axios .then(function() {...}) не относится к вашему компоненту VueJS.Если вы попытаетесь зарегистрировать this в консоли, вы увидите, что он больше не указывает на ваш компонент VueJS.

Поскольку вы используете ES6, просто используйте функцию стрелки, чтобы она сохраняла лексическийthis из прилагаемого объема : 

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