[Vue warn]: Error when evaluating expression ""tunnel-status fa "+this._applyFilters(device.telnet,null,[{"name":"networkIcon","args":[{"value":"telnet","dynamic":false}]}],false)":
TypeError: Cannot read property 'telnet' of undefined (found in component: <network>)
以下是我如何调用我的子组件(见下文):
<network :device="device"></network>
device
对象是从我的商店中提取的计算属性:
device() {
var data = null;
if (typeof this.networks !== 'undefined' && typeof this.networks[this.site.hostname] !== 'undefined') {
data = this.networks[this.site.hostname][this.printer.hostname];
}
return data;
}
<template>
<span class="ping hint--top-right" aria-label="ping: {{ device.ping | currency '' 2 }} ms">
<i class="tunnel-status fa {{ device.ping | networkIcon 'ping' }}"> </i>
</span>
<span class="telnet hint--top-right" aria-label="telnet: {{ device.telnet | currency '' 2 }} ms">
<i class="tunnel-status fa {{ device.telnet | networkIcon 'telnet' }}"> </i>
</span>
</template>
<script type="text/ecmascript-6">
export default {
props: {
device: {
type: Object,
required: true,
default: function () {
return {
ping: null,
telnet: null
}
}
},
},
filters: {
networkIcon: function (probe, type) {
let icon = 'fa-pulsing fa-fw';
if (type == 'ping' && probe > 0) {
icon = 'fa-check text-success';
}
else if (type == 'telnet' && probe > 0) {
icon = 'fa-check text-primary';
}
return icon;
}
}
}
</script>
错误仅在填充store.networks
对象的请求之前发生一次。我并不期待这种错误,因为我声明我的道具device
默认值:
default: function () {
return {
ping: null,
telnet: null
}
}