当绑定对象嵌套生成视图时使秀过滤器报错。
错误如下:
Cannot read property 'map' of undefined; [Component] Lifetime Method Error @ pages/test/test#attached
TypeError: Cannot read property 'map' of undefined
at Proxy.render (http://127.0.0.1:51017/appservice/pages/test/test.js:160:30)
at VueComponent.Vue._render (http://127.0.0.1:51017/appservice/common/vendor.js:6803:28)
at VueComponent.updateComponent (http://127.0.0.1:51017/appservice/common/vendor.js:8749:25)
at Watcher.get (http://127.0.0.1:51017/appservice/common/vendor.js:7590:31)
at new Watcher (http://127.0.0.1:51017/appservice/common/vendor.js:7579:51)
at mountComponent$1 (http://127.0.0.1:51017/appservice/common/vendor.js:8755:9)
at VueComponent.Vue.$mount (http://127.0.0.1:51017/appservice/common/vendor.js:9011:16)
at H.attached (http://127.0.0.1:51017/appservice/common/vendor.js:3526:22)
at r.safeCallback (http://127.0.0.1:51017/appservice/dev/WAService.js:1:818220)
at r.call (http://127.0.0.1:51017/appservice/dev/WAService.js:1:818113)
报错部分生成的代码:
var render = function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
var l1 = _vm.cart.shops.map(function (shop, i) {
var l0 = shop.products.map(function (item, j) {
var f0 = _vm._f("fmNum2")(item.price);
return {
$orig: _vm.__get_orig(item),
f0: f0
};
});
return {
$orig: _vm.__get_orig(shop),
l0: l0
};
});
_vm.$mp.data = Object.assign({}, {
$root: {
l1: l1
}
});
};
生成的代码部分cart.shops实际上在数据没加载前是没有的,这样打开页面的时候就调用了render导致报上面那个错了
重现问题代码:
<template>
<view>
<button @click="loadData">加载数据</button>
<view v-for="(shop,i) in cart.shops" :key="i">
<view>{{shop.name}}</view>
<view>
<view v-for="(item,j) in shop.products" :key="j">
<text>{{item.name}}</text>
<text>{{item.price|fmNum2}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
cart: {}
}
},
filters: {
fmNum2(val) {
return val.toFixed(2);
}
},
methods: {
loadData() {
this.cart = {
total: 1000,
shops: [{
name: '店铺1',
products: [{
name: '商品1-1',
price: 100
}, {
name: '商品1-2',
price: 200
}]
}, {
name: '店铺2',
products: [{
name: '商品2-1',
price: 100
}, {
name: '商品2-2',
price: 200
}]
}]
};
}
}
}
</script>
<style>
</style>
1 个回复
DCloud_UNI_HT
在过滤器中判断一下变量是否存在