时间戳

首页 > 解决方案 > 将 vue.js 中的结果附加到基于语义 UI 的模板

javascript - 将 vue.js 中的结果附加到基于语义 UI 的模板

问题描述

我正在努力添加“加载更多”，这将在当前页面中加载更多随机产品。我的问题是它没有附加，而是更改了用户将单击“加载更多”的当前值。单击“加载更多”时，如何在不更改先前值的情况下附加值。

<div class="ui six doubling cards" id="app-5">
      <div class="card" v-for="i in message">
        <div class="image">
          <img v-bind:src="[[ i.ImageURL ]]">
          <div class="ui top right attached red label">[[i.OfferPercentage]]% OFF</div>

        </div>
        <div class="content">
          <a v-bind:href="[[i.ProductURL]]" target="_blank">
            <div class="ui container">
              <div class="ui tiny blue header"> [[i.ProductName]]</div>
              <h5 class="ui grey header">[[i.Category]]</h5>
              <h5 class="ui red header">₹[[i.ActualPrice]] <s>₹[[i.StrikedPrice]]</s> </h5>

            </div>
          </a>
        </div>
      </div>
      <button v-on:click="reverseMessage" class="fluid ui button">Load More</button>

    </div>
    <p></p>


<script>
    var app5 = new Vue({
    el: '#app-5',
    delimiters: ['[[',']]'],
    data: {
        message: []
    },
    methods: {
        reverseMessage: function () {
          axios.get('http://127.0.0.1:5000/test').then(response => {
            this.message = response.data;
            });
        }
    }
    });
    </script>

标签： javascriptvue.js

解决方案

而不是替换this.message，附加到它：

axios.get('http://127.0.0.1:5000/test').then(response => {
    this.message.push(...response.data);
});

推荐阅读