vue.js - Vuejs防止数据为空

Question

在我的组件中，我的数据可能无效

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

我想知道解决该模式的最佳(更惯用)解决方案是什么

谢谢

Answer 1

很难选择哪个更惯用；这些都是使用 Vue 解决问题的惯用解决方案。换句话说，我不会不高兴在 Vue 应用程序中看到它们中的任何一个。

也就是说，在这种情况下我会避开组件解决方案除非您可能在许多is-valid组件> 位置，而不仅仅是您在这里谈论的一个组件。此外，开发人员乔在阅读您的代码时不会立即知道其具体用途；他们必须去阅读is-valid的代码。

在我看来，在这种情况下，使用计算或 v-if 几乎是等效的，但有一个异常(exception)。使用上面相同的参数，Joe Developer 阅读您的模板将立即知道 v-if 发生了什么，但必须查看计算结果才能完全理解它。 然而这是一件非常的小事。