首页 > 其他 > 详细

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

时间:2019-08-02 13:48:49      阅读:86      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!