时间戳

首页 > 解决方案 > 在 vue.js 中渲染时删除最后一项

vue.js - 在 vue.js 中渲染时删除最后一项

问题描述

我面临一个问题，即即使Title我的 JSON 中没有与之关联的项目也会被渲染。请查看随附的屏幕截图，这将使您了解我的问题（标记为红色）。我知道这是因为lid在我的 JSON 中，vue 正在渲染它而没有任何关联（即标题）值。我该如何解决这个问题。有没有办法在渲染时删除最后一个项目，还是有其他方法？我需要lidinthis.dino但在我的 vue-app 中渲染时不需要它。有没有办法在渲染时从 JSON 中弹出最后一项。

<div id="vue-app">
          <div id="myList" v-for="item in items">
                <p>{{item.Title}}</p>
<button v-on:click="loadmore()" class="fluid ui button">Load More</button>

下面是我的vue函数

 new Vue({
    el: '#vue-app',
    delimiters: ['[[', ']]'],
data: {
      dino: d_var,
      cati: d_catox,
      items: []
    },    
    methods: {
      loadmore: function () {
        axios.get(this.dino)
          .then(response => {
            this.items.push(...response.data);
            this.dino = "/api/search/" + this.items[this.items.length - 1].lid + "/" + this.cati;
          })
      }
    }
})

下面是我的 JSON

[
  {
    "Title": "HealthXP1"
  }, 
  {
    "Title": "HealthXP2"
  },
{
    "Title": "HealthXP3"
  },
{
    "lid": "A1234567890"
  }
]

在此处输入图像描述

标签： vue.js

解决方案

您可以使用 'v-if' 或 'v-show' 指令作为：

<div id="vue-app">
          <div id="myList" v-for="item in items" v-show="item.Title">
                <p>{{item.Title}}</p>
<button v-on:click="loadmore()" class="fluid ui button">Load More</button>

如果 item.Title 已定义，它将在列表中显示该项目，否则将不会在 DOM 中呈现

推荐阅读