Vuejs verhindern, dass Daten null

Question

In meiner Komponente sein habe ich Daten, die succesptible ist ungültig sein

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

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

Ich habe 3 Ideen, die zu beheben:

1 - Verwenden Sie v-ifv-else in Vorlage

<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 - Machen Sie einen berechneten Wert

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

computed: { 
    computedIsValid: function() { 
    return isValid(maybeInvalid) ? maybeInvalid : "invalid"; 
    } 
} 

3 - Aufbau einer Komponente

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

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

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

und verwenden diese Komponente

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

... 
components: { 
    isValidComponent: isValidComponent 
} 

Ich mag würde wissen, was das Beste ist (mehr idiomatische) Lösung

Dank dieses Muster zu lösen

Answer 1

Es ist schwer zu wählen, welches idiomatischer wäre; Dies sind alles idiomatische Lösungen für Ihr Problem mit Vue. Mit anderen Worten, ich wäre nicht unglücklich, wenn ich sie in einer Vue-Anwendung sehen würde.

Das heißt, würde ich steuern weg von der Komponenten-Lösung in diesem Fall es sei denn Sie wahrscheinlich die is-valid Komponente verwenden, in viele Orten, nicht nur die eine Komponente, die Sie sprechen hier. Darüber hinaus wird Joe Developer, der Ihren Code liest, nicht sofort wissen, was das ist. Sie müssen den Code für is-valid lesen.

Mit einer berechneten oder v-if sind in meinen Augen in diesem Fall mit einer Ausnahme ziemlich gleichwertig. Unter Verwendung des gleichen Arguments oben wird Joe Developer, der Ihre Vorlage liest, sofort wissen, was mit v-if passiert, muss sich aber die Berechnung ansehen, um es vollständig zu verstehen. Dies, aber ist ein sehr kleine Sache.