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

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