vue 组件实例自动提示的搜索框

你的名字 2022-11-15 11:25 178阅读 0赞

Vue.component(Button.name, Button)  
  Vue.component(Select.name, Select)  
  Vue.component(Input.name, Input)  
  Vue.component(Autocomplete.name, Autocomplete)

export default \{  
    name: "search",  
    data() \{  
      return \{  
        movie\_list: \[\],  
        msg: '',  
      \};  
    \},  
    components: \{\},  
    methods: \{  
      clear() \{  
        console.log('clear')  
      \},  
      async loadAll() \{  
        let list = await get\_hot()  
        // console.log('hot list', list)  
        return list  
      \},  
      async querySearchAsync(queryString, cb) \{

if (this.msg.length == 0) \{  
          this.movie\_list = await get\_hot()  
        \} else \{  
          this.movie\_list = await search\_movie(this.msg)  
        \}  
        let results = \[\]  
        for (let i of  this.movie\_list) \{  
          // console.log(i)  
          results.push(\{  
            value: i\['alt\_title'\],  
            movie\_id: i\['id'\],  
          \})  
        \}  
        cb(results)  
      \},

handleSelect(item) \{  
        // console.log('点击的电影是', item\['movie\_id'\]);  
        this.$emit('change\_movie\_id', item\['movie\_id'\])  
      \}  
    \},  
    mounted() \{  
      this.movie\_list = this.loadAll();  
    \}  
  \}  
</script>

.wrapper \{  
    display: flex;  
    justify-content: center;  
    /\*margin: 5px;\*/  
  \}

</style>