仅当有数据时，才有条件呈现vuejs中的另一个元素或父元素

Question

问题

如果某些数据不可用，我应该如何在我的vue项目中添加条件语句以显示某个元素，并隐藏其父级。

背景

我正在从包含食谱的Taco API中获取数据。但是有时该数据为空。

如果有数据，当前看起来像这样

如果没有数据，则只有空白部分

---

代码

在CodePen上的演示

带有vue的HTML

<h3>Recipe <span>not available</span></h3>
<p>
  <vue-markdown>{{ taco.recipe.title }}</vue-markdown>
</p>
<ul>
  <li v-for="item of taco.recipe.items">
    <vue-markdown>{{ item }}</vue-markdown>
  </li>
</ul>

JS

data:{
  taco: { 
    name: '',
    condiment_name: '',
    condiment_recipe_url: '',
    recipe: { 
      title: '',
      items: []
    }
  }
},

---

意图

如果“配方”具有值

• 正常渲染

如果食谱{{item}}的值为空白

• 节目中的标题<span>显示为“不可用”。
• 不呈现父级<ul>
• 隐藏上面的段落，该段落包含{{item}}的值

---

没有类似问题vuejs-conditional-handlebars的解决方案。

我看了official documentation on conditionals，但不清楚如何在我的项目中实现它。

Answer 1

在下面尝试使用此条件并使用v-if, v-else条件，当数组中没有结果时，该条件应显示"no result"。

<h3>Recipe <span>not available</span></h3>
<p>
  <vue-markdown>{{ taco.recipe.title }}</vue-markdown>
</p>

<div  v-if="taco.recipe.items.length > 0" > 
  <ul>
    <li  v-for="item of taco.recipe.items">
      <vue-markdown>{{ item }}</vue-markdown>
    </li> 
  </ul>
</div> 
<div v-else >
  No result found
</div>

让我知道是否可行。

Answer 2

例如，您可以只引入计算变量以查看其是否为空，然后使用它来隐藏您想要的内容。

 computed: {
    recipeNotEmpty: function () {
      return this.taco.recipe && this.taco.recipe.items.length > 0
    }
  },
...
<p v-if='recipeNotEmpty'>
      <vue-markdown>{{ taco.recipe.title }}</vue-markdown>
    </p>
    <ul v-if='recipeNotEmpty'>
      <li v-for="item of taco.recipe.items">
        <vue-markdown>{{ item }}</vue-markdown>
      </li>
    </ul>

Codepen

Answer 3

由于将要重复使用它，因此可能需要一个计算属性，用于存储是否显示配方项目。在您的vue组件配置中：

...
computed: {
  recipeItemsEmpty () {
    return this.taco.recipe && !this.taco.recipe.items.length
  }
}
...

有了这个，我们可以只使用v-if来有条件地渲染事物：

<h3>Recipe <span v-if="recipeItemsEmpty">not available</span></h3>
<div v-if="!recipeItemsEmpty">
  <p>
    <vue-markdown>{{ taco.recipe.title }}</vue-markdown>
  </p>
  <ul>
    <li v-for="item of taco.recipe.items">
      <vue-markdown>{{ item }}</vue-markdown>
    </li>
  </ul>
</div>

请注意，我在您的p和ul元素周围添加了一个div，因此v-if条件只能使用一次，但是如果您确实不希望使用div，则可以将p和ul元素上的v-if条件相同。