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

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 星