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组件，而不仅仅是你在这里谈论的那个组件。此外，Joe Developer阅读您的代码并不能确切地知道它的作用;他们必须阅读is-valid的代码。

在这种情况下，使用计算机或v-if在我看来几乎相同，只有一个例外。使用上面相同的参数，Joe Developer阅读您的模板将立即知道v-if会发生什么，但必须查看计算机才能完全理解它。这个然而是非常次要的事情。

Vuejs阻止数据为空

1 个答案: