根据后台接口中的关键字字段,搜索匹配的页面内容

2019-08-02

根据后台接口中的关键字字段,搜索匹配的页面内容

后台接口的关键字字段是  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() }

 

技术图片

 

根据后台接口中的关键字字段,搜索匹配的页面内容

根据后台接口中的关键字字段,搜索匹配的页面内容

原文地址:https://www.cnblogs.com/lzuku/p/11287751.html