Во второй раз при запуске JQuery Ajax данные не связываются в vuejs2, хотя данные обновляются в объекте Vue - PullRequest
Новая
       35

Во второй раз при запуске JQuery Ajax данные не связываются в vuejs2, хотя данные обновляются в объекте Vue

0 голосов
/ 31 мая 2019

Поэтому я пытаюсь привязать значение к элементу HTML input type = "checkbox" , используя v-модель vuejs2, вызывая функцию get из JQuery Ajax.Значение связывается правильно в первый раз, но после этого оно ничего не делает, оно также снимает флажок input type = "checkbox" . 

...<input type="checkbox" id="notification" class="custom-control-input" v-model="checked"  />...

... <button class="btn btn-primary" type="button" onclick="getSettings()">Update</button>...

<script>
     function getSettings()
                {
                    $.ajax({
                        type: "GET",
                        url: "../../handler/getSettings.ashx",
                        contentType: "application/json; charset=utf-8",
                        data: {

                        },
                        async:false,
                        success: function (result) {

                            var app = new Vue({
                                el: '#notification',
                                data: {
                                    checked: result.Notification
                                }
                            });

                            console.log(app.checked);
                        },
                        error: function (err) {

                        }
                    });
                };
</script>

Я ожидаю, что будет выбран, но если яперезапустите (второй раз и далее) код (вызвав getSettings ()), input type = "checkbox" отмените выбор и останется отмененным.Я могу подтвердить, что код выполняется, потому что журнал консоли возвращает «true».

1 Ответ

0 голосов
/ 31 мая 2019

Так что похоже на каждый отправленный вами запрос - вы создаете новый объект VueJS, который уничтожает все данные, которые вы сохранили. Vue является очень мощным и позволяет вам объявлять методы внутри самого объекта. Как видно ниже.

Объекты Vue также имеют события жизненного цикла! Что позволяет вам помещать такие вещи, как «смонтированные» в объекте Vue. Монтируется вызывается, когда объект Vue присоединен к HTML-странице.

Взгляните на переделку ниже и документы. после. 

<script>
var app = new Vue({
  el: '#notification',
  data: {
    checked: false
  },
  methods:{
    getSettings(){
      $.ajax({
              type: "GET",
              url: "../../handler/getSettings.ashx",
              contentType: "application/json; charset=utf-8",
                        data: {},
                        async:false,
                        success: function (result) {
                            this.checked = result.Notification;
                            console.log(app.checked);
                        },
                        error: function (err) {

                        }
                    });
    }
  },
  mounted(){
    this.getSettings();
  }
});
</script

Я не проверял это. Но это должно работать.

Я предлагаю посмотреть на: https://vuejs.org/v2/guide/ Прокрутите немного вниз, и вы увидите несколько примеров использования методов.

...