老师这个报错是什么原因一直没弄明白
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; } }
1
收起
正在回答
7回答
同学你好,这边测试还是没有复现出这个报错。建议:先按照下方的方式测试下,看是否能得到keywords这个值,记得注释掉链接,不然就跳转了,看不到输出。
祝学习愉快~
宗桦
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); }) }) }
之后点击热门搜索,就又是这个报错
keywords.filter is not a function,我看这里没问题啊
这里的传参也没问题不知道哪里的问题
热门框架Vue开发WebApp 18版
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星