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

Question

我正在努力添加“加载更多”，这将加载更多的随机产品在当前页面。我的问题是，它不是附加，而是改变当前的值，用户将点击“加载更多”。当单击"LOAD MORE“时，如何在不更改前一个值的情况下追加值。

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

Answer 1

与其替换this.message，不如追加如下：

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