Vuejsは私のコンポーネントで

Question

私がきたsuccesptibleあるデータが無効であることをnullにするためにデータを防ぐ

<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 -

<template> 
    <p> field </p> 
    <is-valid-component :maybeInvalid="maybeInvalid" /> 
    <p> other field </p> 
<template> 

... 
components: { 
    isValidComponent: isValidComponent 
} 

が、私はそのパターンに

おかげ

を解決するために最善の（より多くの慣用）ソリューションです知っているしたいと思い、このコンポーネントをコンポーネント

var isValidCompoenent = { 
    props: ['maybeInvalid'], 

    template: ` 
    <p v-if="isValid(maybeInvalid)"> {{ maybeInvalid }} </p> 
    <p v-else> invalid </p>` 

    methods: { 
    isValid: function (data) { 
     return data != null; 
    } 
    } 
} 

を構築し、使用

Answer 1

もっと慣用的なものを選ぶのは難しいです。これらはすべて、Vueを使用して問題を解決する慣用的な解決策です。言い換えれば、私はVueアプリケーションでそれらのいずれかを見て不幸ではないでしょう。あなただけの1つのコンポーネントあなたがここで話しているわけではない、多く場所でis-validコンポーネントを使用する可能性があるない限り、私はこのケースで離れコンポーネント溶液から操縦するだろうと述べ

。さらに、Joe Developerがコードを読んでいても、まさにそれが何をしているのかをバットから正確に知ることはできません。彼らはis-validのコードを読む必要があります。計算されたかv-ifを使用して

は、1つの例外を除いて、この場合、私の目にはほとんど同じです。上記の同じ議論を使用して、Joe Developerはあなたのテンプレートを読んですぐにv-ifで起こることを知るでしょうが、それを完全に理解するために計算を見なければなりません。これは、しかし非常に軽微なものです。