代码之家 › 专栏 › 技术社区 › fear_matrix

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

vue.js javascript

0

fear_matrix · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

1

jotaelesalinas 7 年前

而不是取代 this.message ,在其后面附加:

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