码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-08-02 13:25:11      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:接口   http   生命周期   click   列表   cat   函数   imp   ESS   

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

 

技术图片

 

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

标签:接口   http   生命周期   click   列表   cat   函数   imp   ESS   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!