Изменение значения в коде / теге JavaScript с помощью Vue.js

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 помещает мои данные в указанный контейнер пользовательского интерфейса, как показано ниже.

<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 должен быть обновлен с последним идентификатором.Есть ли решение этой проблемы или, возможно, какие-либо рекомендации по изменению логики.

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;
             });

    }
}