所以我有个问题
$emit
将数据发送到父级。我想做的是点击submit按钮,从输入中获取数据,然后将结果发送给父级。我用的是AA原型
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>
