2
在我的組件我已經是succesptible數據是無效的Vuejs防止數據爲空
<template>
<p> field </p>
<p> {{ maybeInvalid }} </p>
<p> other field </p>
<template>
var component = {
data: function() {
return {
maybeInvalid: xxx
}
}
我有3個想法解決這個問題:
1 - 使用v-if
v-else
模板
<template>
<p> field </p>
<p v-if="isValid(maybeInvalid)"> {{ maybeInvalid }} </p>
<p v-else> invalid </p>
<p> other field </p>
<template>
...
methods: {
isValid: function (data) {
return data != null;
}
}
2 - 使計算值
<template>
<p> field </p>
<p> {{ computedIsValid }} </p>
<p> other field </p>
<template>
computed: {
computedIsValid: function() {
return isValid(maybeInvalid) ? maybeInvalid : "invalid";
}
}
3 - 建立一個組件
var isValidCompoenent = {
props: ['maybeInvalid'],
template: `
<p v-if="isValid(maybeInvalid)"> {{ maybeInvalid }} </p>
<p v-else> invalid </p>`
methods: {
isValid: function (data) {
return data != null;
}
}
}
,並使用該組件
<template>
<p> field </p>
<is-valid-component :maybeInvalid="maybeInvalid" />
<p> other field </p>
<template>
...
components: {
isValidComponent: isValidComponent
}
我想知道什麼是最好的(更地道)的解決方案來解決這個模式
感謝
你也可以使用指令)組件看起來像計算糖,你可以用它的計算屬性替換方法。如果你經常需要檢查無效,最好選擇組件,否則計算 –