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

Итак, я пытаюсь привязать значение к элементу HTML input type = "checkbox" с помощью v-модели vuejs2, вызывая функцию JQuery Ajax 'get'. Значение связывается правильно в первый раз, но потом ничего не делает. Также снимается флажок 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" снимет выделение и останется невыделенным. Я могу подтвердить, что код выполняется, потому что журнал консоли возвращает «истина».


get ajax vuejs2 v-model
person JSmi    schedule 30.05.2019    source источник
comment
После исследования этот раздел HTML исчезает v-model = checked после первого вызова метода getSettings (). Может ли это быть зацепкой?   -  person JSmi    schedule 31.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

У объектов Vue также есть события жизненного цикла! Это позволяет вам помещать такие вещи, как «смонтированные» в объект Vue. Mounted вызывается, когда объект 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/ Прокрутите немного вниз вы и увидите несколько примеров с использованием методов.

person JP7790    schedule 30.05.2019
comment
Я реализовал это, хотя метод getSettings () запускается и возвращает правильное значение * console.log показывает правильное значение в базе данных 'true' *, похоже, что это не меняет свойство выбора HTML - person JSmi; 31.05.2019