javascript - 仅当数据可用时，才在 vuejs 中条件渲染另一个元素或父元素

Question

##问题

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

##背景

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

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

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

<小时/>

##代码

演示 CodePen

##HTML 与 vue

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

让我知道这是否有效。