老师这个报错是什么原因一直没弄明白

pages/search/index.vue

<template>
  <transition name="search">
    <div class="search">
      <header class="g-header-container">
          <search-header></search-header>
      </header>
      <div class="g-content-container">
        <me-scroll>
        <search-hot ></search-hot>
        </me-scroll>
      </div>
    </div>
  </transition>
</template>
<script>
import MeScroll from "base/scroll";
import SearchHeader from './header';
import SearchHot from './hot';
export default {
  name: "search",
  components: {
    MeScroll,
    SearchHeader,
    SearchHot
  },
  data() {
    return {
      query: ""
    };
  }
};
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.search {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $search-z-index;
  background-color: $bgc-theme;
}
.g-content-container {
  height: 100%;
  padding-top: $navbar-height;
}
.search-enter-active,
.search-leave-active{
    transition:all 0.3s;
}
.search-enter,
.search-leave-to{
    transform:translate3d(100%,0,0);
}
</style>

pages/search/hot.vue

<template>
  <div class="hot">
    <h4 class="hot-title">热门搜索</h4>
    <div class="loading-container" v-if="!hots.length">
      <me-loading></me-loading>
    </div>
    <ul class="hot-list" v-else>
      <li
        class="hot-item"
        v-for="(item,index) in hots"
        :key="index"
        @click="$_search_selectItem(item.hotWord)"
      >{{item.hotWord}}</li>
    </ul>
  </div>
</template>
<script>
import MeLoading from "base/loading";
import { getSearchHotKeyword } from "api/search";
import { searchMixin } from "assets/js/mixins"; //在这引入了mixins之后，在mxins写引入的方法
export default {
  components: {
    MeLoading
  },
  data() {
    return {
      hots: []
    };
  },
  mixins: [searchMixin], //这里还可以放更多的，因为它是数组
  created() {
    this.getHotKeyword().then(() => {
      this.$emit("loaded");
    });
  },
  methods: {
    getHotKeyword() {
      return getSearchHotKeyword().then(data => {
        return new Promise(resolve => {
          if (data) {
            this.hots = data;
            resolve(); //调用了resolve才能执行then里的东西
          }
        });
      });
    }
  }
};
</script>
<style lang="scss"scoped>
@import "~assets/scss/mixins";
.hot {
  padding-left: 10px;
  background-color: #fff;
  border-bottom: 1px solid $border-color;
  margin-bottom: 10px;
  &-title {
    height: 34px;
    line-height: 34px;
    font-size: $font-size-l;
    font-weight: bold;
  }
  &-list {
    display: flex;
    flex-wrap: wrap;
  }
  &-item {
    padding: 8px;
    background-color: #f0f2f5;
    border-radius: 4px;
    margin: 0 10px 10px 0;
    color: #686868;
  }
}
.loading-container {
  padding: 10px 0;
}
</style>

search/config.js

const prefix = 'mall-search';
const suffix = 'key';
export const SEARCH_HISTORY_KEYWORD_KEY = `${prefix}-history-keyword-${suffix}`;

assets/js/mixins.js

import storage from "assets/js/storage";
import { SEARCH_HISTORY_KEYWORD_KEY } from "pages/search/config";
export const searchMixin = {
    //把点击过的保存在localstorage
    //mixins在vue官网说最好写自己的私有方法，前面要加$_前缀
    methods:{
        $_search_selectItem(keyword) {
            console.log(keyword);
        let keywords = storage.get(SEARCH_HISTORY_KEYWORD_KEY, []);
         
        if (keywords.length !== 0) {
          //如果已经有保存过的了，还点击了它，就把原来的删除然后重新保存，就显示在最开头的
        keywords = keywords.filter(val => val !== keyword);  //1、只要value值不等于keyword就保留下来
        }
        keywords.unshift(keyword); //2、最后再把keyword从头开始添加
         
        storage.set(SEARCH_HISTORY_KEYWORD_KEY, keywords);//3、最终把keywords的数组添加在localstorage里
   
        location.href = `https://s.m.taobao.com/h5?event_submit_do_new_search_auction=1&_input_
              charset=utf-8&topSearch=1&atype=b&searchfrom=1&action=home%3Aredirect_app_action&from=
              1&sst=1&n=20&buying=buyitnow&q=${keyword}`;
      }
    }
}

assets/js/storage.js

const storage = window.localStorage;
 
export default{
    //序列化传过来的值，将它变成字符串
    set(key,val){
        if(val === undefined){
            return;
        }
        storage.setItem(key,serialize(val));
    },
    //反序例化，将它变成对象
    get(key,def){//def是在调用的时候，如果没获取到返回的值
        const val = deserialize(storage.getItem(key));
        return val === undefined ? def :val;
    },
    //清除键的内容
    remove(key){
        storage.removeItem(key);
    },
    //所有内容都清掉
    clear(){
        storage.clear();
    }
};
function serialize(val){
    //会把传过来的值转换成字符串的意思
    //JSON.stringify(true);  // 'true'
    return JSON.stringify(val);
}
function deserialize(val){
    if(typeof val !=='string'){
        return undefined;
    }
    //try一定会执行，如果try有错误，就执行catch
    try{
    //服务器接收的数据转换成JavaScript对象
    // <p id="demo"></p>
  
    // <script>
    // var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
    // document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
    // </script>
    return JSON.parse(val);
    }
    //处理并不是json.parse的格式
    catch(e){
        return val || undefined;
    }
}

宗桦 2019-10-17

源自：实战：Vue 完成分类、搜索页 2-4 热门搜索

收起

7回答

好帮手慕言回答被采纳获得+3积分 2019-10-18 20:05:57

同学你好，这边测试还是没有复现出这个报错。建议：先按照下方的方式测试下，看是否能得到keywords这个值，记得注释掉链接，不然就跳转了，看不到输出。

祝学习愉快~

收起回答

提问者宗桦 2019-10-19 12:30:09

自己解决了，谢谢老师

收起回答

提问者宗桦 2019-10-19 11:31:42

老师，我发现用火狐不会报错，是正常的，但是谷歌浏览器就会报错，是什么原因？

收起回答

提问者宗桦 2019-10-19 11:25:02

按照老师说的做了，无论点击什么都是输出金士顿内存

收起回答

提问者宗桦 2019-10-18 12:38:48

慕课网下载的源码，把api/search.js获取热门数据的接口改成

http://www.imooc.com/api/search/hot

export const getSearchHotKeyword = () =>{
  return axios.get('http://www.imooc.com/api/search/hot',{
  //timeout:10
  timeout:TIMEOUT
  }).then(res =>{
  // console.log(res)
  res = res.data.hotKeyWord;
  // 因为没有提供code成功的判断码，所以自己写一个
  if( res && res.owner){//succeed
      return res.owner
  }
  // 如果没有就报错
  throw new Error('没有成功获取数据！');
  }).catch(err => {
      if(err){
          console.log(err);
      }
  }).then(res =>{
      return new Promise(resolve =>{
          setTimeout(() =>{
              resolve(res);
          },1000);
      })
  })
}