浏览量 4531
2019/01/19 18:34
input 框丢失焦点或者回车时触发,通过 axios 发送post请求 向api获取数据,后填充到下方展示框中。
search.vue
<template>
<div class="search">
<div class="magic-search-box">
<div class="search-form">
<input id="searc-input" v-model="keyword" @blur.prevent="getlinks()" @keyup.enter="getlinks" type="text" placeholder="请输入关键词" autocomplete="off">
</div>
</div>
<div class="magic-search-box">
<div v-for="link in links">
<h2 class="t"><a :href="link.url">{{link.url.split('-')[1]}}</a></h2>
<div class="c-abstract">
{{link.content}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
keyword:'',
links:''
}
},
//axios
methods: {
getlinks:function (event) {
let qs = require('qs');
this.$axios.post("/search_test",
qs.stringify({'keyword': this.keyword}))
.then(data => {
this.links= data.data.data
})
}
}
}
</script>
1.修改config api后需要 重新执行 npm run dev,config被修改后不会自动加载。
error:
uncaught-in-promise-error-request-failed-with-status-code-404
2.axios 不能直接将字典发送post请求,这样会报404 或者500 错误。
error:
uncaught-in-promise-error-request-failed-with-status-code-500
通过 下面方法转换解决:
let qs = require('qs'); this.$axios.post("/search_test", qs.stringify({'keyword': this.keyword})) .then(data => { this.links = data.data.data })
上一篇 搜索 下一篇