Vuejs防止數據爲空

在我的組件我已經是succesptible數據是無效的Vuejs防止數據爲空

<template> 
    <p> field </p> 
    <p> {{ maybeInvalid }} </p> 
    <p> other field </p> 
<template> 

var component = { 
    data: function() { 
    return { 
     maybeInvalid: xxx 
    } 
}

我有3個想法解決這個問題：

1 - 使用v-ifv-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 
}

我想知道什麼是最好的（更地道）的解決方案來解決這個模式

感謝

來源

2017-05-04 Epitouille

你也可以使用指令）組件看起來像計算糖，你可以用它的計算屬性替換方法。如果你經常需要檢查無效，最好選擇組件，否則計算 –

很難選擇哪一種比較習慣;這些都是使用Vue解決您的問題的習慣解決方案。換句話說，我不會爲在Vue應用程序中看到他們中的任何人而感到不快。

這就是說，我可以駕駛從組件解決方案遠在這種情況下，除非你有可能使用is-valid成分許多的地方，而不僅僅是一個組件，你是在談論這裏。另外，Joe Developer閱讀你的代碼並不會完全知道它的功能，他們必須閱讀is-valid的代碼。

在這種情況下，使用計算或v-if在我的眼中非常相當，只有一個例外。使用上面的相同論點，Joe Developer閱讀您的模板將立即知道v-if會發生什麼情況，但必須查看計算結果才能完全理解它。這，然而是一個非常次要的事情。

來源

2017-05-04 15:21:10 Bert

Vuejs防止數據爲空

回答

相關問題