根据后台接口中的关键字字段,搜索匹配的页面内容
后台接口的关键字字段是 searchMessage
template
// 通过v-model 绑定value,通过@click 绑定点击事件
<div>
<input
type="text"
v-model="value"
placeholder="根据商家店名关键字搜索">
<button @click='clickSearch'>搜索</button>
</div>
script
// 引入接口地址
import {getOrganizationList} from "@/api";
// 在data返回中定义value:"" 与 list:{}
data(){
return {
seller:{},
value:'',
},
}
// 搜索事件中传入通过v-model双向绑定value,并通过this.value与我们定义中value做匹配。
// 调用列表页接口并向后台发送已与搜索匹配的关键字, 渲染列表页面。
methods: {
clickSearch(value){
value = this.value
getOrganizationList({searchMessage: value}).then((res)=>{
console.log(res)
this.seller = res.data.list
}).catch(err=>{
console.log(err)
})
},
}
// 通过Vue生命周期函数,Mounted(挂载渲染到dom后),使用关键字匹配的搜索方法
mounted(){
this.clickSearch()
}