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防止数据为空

回答

相关问题