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

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

http://img1.sycdn.imooc.com//climg/5da7446c095258f415210796.jpg

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;
    }
}


正在回答

登陆购买课程后可参与讨论,去登陆

7回答

同学你好,这边测试还是没有复现出这个报错。建议:先按照下方的方式测试下,看是否能得到keywords这个值,记得注释掉链接,不然就跳转了,看不到输出。http://img1.sycdn.imooc.com//climg/5da9a9eb09fd49e813030915.jpg

祝学习愉快~


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

自己解决了,谢谢老师

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

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

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

http://img1.sycdn.imooc.com//climg/5daa81ff0937050a14920852.jpg按照老师说的做了,无论点击什么都是输出金士顿内存

提问者 宗桦 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);
      })
  })
}

之后点击热门搜索,就又是这个报错

http://img1.sycdn.imooc.com//climg/5da941340942030d12060734.jpg

keywords.filter is not a function,我看这里没问题啊

http://img1.sycdn.imooc.com//climg/5da9418709c63e3b12330847.jpg这里的传参也没问题http://img1.sycdn.imooc.com//climg/5da941d0097ee8f707280503.jpg不知道哪里的问题

  • 提问者 宗桦 #1
    打开了我曾经启动没问题的项目,也是同样的问题,是什么原因?
    2019-10-18 13:00:31
好帮手慕言 2019-10-17 14:33:05

同学你好,这边测试了老师的源码,也把同学提供的代码放到源码里面测试,都没有出现报错。同学可以清一下缓存,再测试下。可以下载老师的源码进行测试。也可以把自己的关于这部分的代码放到源码里面进行测试。看有没有问题哦

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 提问者 宗桦 #1
    奇怪了,我用慕课网下载的源码也会报错
    2019-10-18 11:46:13
好帮手慕言 2019-10-17 12:17:20

同学你好,老师使用同学提供的代码放到源码中进行测试,没有复现出和同学同样的报错(不管点击几次,都没有报错)。测试后的截图如下:

http://img1.sycdn.imooc.com//climg/5da7ea990948852e16600688.jpg

同学的怎么样测试的呢?可以把详细的操作步骤描述一下。也可以下载老师的源码,把自己的代码放到源码里面,看是否是其他问题。

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 提问者 宗桦 #1
    我也看不出哪里有问题,只要重复的点击热门搜索里的内容,就报错了
    2019-10-17 12:25:45
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师