エラー
[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
}
}