element中的 el-autocomplete 搜索时输入后匹配输入建议必须有value属性

1、项目需求中,有用到 el-autocomplete 输入后联想匹配输入建议,并以下拉菜单的形式展示,如图:

2、但是后台返回的值当中有名称,没有value属性,

然后联想搜索的下来数据不展示

3、解决办法:给每一项添加vaule字段就可以了,然后再调用他的回调就可以解决掉了

    <el-form-item label="添加影片:">
            <el-autocomplete class="inline-input"
              v-model="searchFilm.keyword"
              style="width: 482px" 
              :fetch-suggestions="searchFilmFn"
              :trigger-on-focus="false"
              placeholder="请输入影片名称搜索"
              @select="handleSelect"
            ></el-autocomplete>
            <el-button type="primary" class="add_btn" @click="addFilmFn" >添加</el-button>
            <span v-if="addMoviesList.length > 499" style="color : red">一个片单最多可包含500部影片</span>
          </el-form-item>

   // 返回输入建议的方法 
    searchFilmFn(keyword,cb) {
       clearTimeout(this.timer)
      // 影片关键字
        this.timer = setTimeout( async()=>{
        const res =  await searchFilmApi(this.searchFilm)
        console.log('res',res);
        this.moviesList = res.movies
        this.moviesList.forEach(res=>{
         res.value = res.name
      })
      // 调用 callback 返回建议列表的数据
      cb(this.moviesList);
       },500)
      },

添加了vaule字段就可以正常显示了

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值