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

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，我把它作为我的全局变量。

现在发生的是用户点击"Load More“，如下所示

<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没有更新全局变量。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;
             });

    }
}