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

Posted 2022-06-04 lzuku

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