Vue的报错,一个仿造百度的下拉菜单

报的错误是:

clipboard.png

下面是代码:
<template>
<div>
<div class="container search-container" id="app">

<h1 class="title" >baidu-search</h1>
<input type="text" class="form-control" placeholder="请输入想要搜索关键字" v-model="keyword" @keyup="get($event)" @keydown.down.prevent="selectDown"
@keydown.up.prevent="selectUp">
<ul>
    <li class="text-center" v-for="(value,index) in myData"><span class="text-success textprimary" :class="{gray:index==now}">{{value}}</span></li>
</ul>
<p ><h2 v-show="myData.length==0" class="text-warning text-center">(*^__^*)暂时没有数据</h2></p>

</div>
</div>
</template>

<script>

export default {
data(){

 return{
        myData:[],
        keyword:'',
        now:-1
    }

},
    methods:{
        get:function (event) {
            if(event.keyCode==38||event.keyCode==40)return;
            if(event.keyCode==13){
                window.open('https://www.baidu.com/s?wd='+this.keyword);
                this.keyword=''
            }
            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                wd:this.keyword
            },{
                jsonp:'cb'
            }).then(function (res) {
                this.myData=res.data.s;
            },function () {

            });
        },
        selectDown:function () {
            this.now++;
            if(this.now==this.myData.length)this.now=-1;
            this.keyword=this.myData[this.now];
        },
        selectUp:function () {
            this.now--;
            if(this.now==-2)this.now=this.myData.length-1;
            this.keyword=this.myData[this.now];
        }
    }

}
</script>

<style scoped>

</style>

阅读 2.4k
3 个回答

哪有个sug (漂亮的姑娘?)

同楼上 sug在哪里

看到错误,我突然发现似乎也遇到过,似乎是热更新导致的,重新刷新一下试试咯

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题