Question

我陷入了一个问题，但是我不确定如何解决这个问题。但我会尽力解释。

在加载页面时，我有这段代码是使用基于jinja的占位符。

<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>
            <script type="text/javascript">var lastid = "{{lid}}"</script>
          </div>

上面的代码可以很好地渲染，并且我也得到了将其作为全局变量的lastid。

现在发生的是用户点击“加载更多”这样的

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

然后触发像这样的vue.js函数。

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

vue.js将我的数据推送到提到的ui容器中，如下所示。

<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>
              <script type="text/javascript">lastid = [[lid]]</script>
            </div>

请注意，有一个小的javascript标签。我得到的lastid没有更新全局变量。姓氏应使用最新的ID更新。是否有解决此问题的方法，或者是否有任何更改逻辑的建议。

Answer 1

您需要将ld添加到您的应用数据中，并根据axios的响应对其进行更新：

data: {
    message: [],
    ld: 0, // default id you want to start it from
},
methods: {
    loadmore: function () {
        axios.get('http://127.0.0.1:5000/api/products/'+this.ld)
             .then(response => {
                 const messages = ...response.data;
                 this.message.push(messages);
                 this.ld = messages.pop().id;
             });

    }
}

使用Vue.js更改JavaScript代码/标签中的值

1 个答案: