The second time the JQuery Ajax is fired the data does not bind in vuejs2, although the data update in Vue object

Question

So I`m trying to bind a value to a HTML input type="checkbox" element by using vuejs2 v-model, by calling a JQuery Ajax 'get' function. The value binds correctly the first time, but afterwards it does nothing, It also deselect the 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>

I expect the to be selected, but if I rerun (for the second time and onward) the code (by calling getSettings()) the input type="checkbox" deselect and stays deselected. I can confirm that the code get executed, due to the fact that the console log return a 'true'.

Answer 1

So it looks like every request you send - you build a new VueJS object which destroys all the data you saved. Vue is super powerful, and allows you to declare methods within the object itself. As seen below.

Vue objects also have life cycle events! Which allows you to put things like "mounted" in the Vue object. Mounted is called when the Vue object is attached to the html page.

Take a look at the rework below, and the docs. after.

<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

I haven't tested this. But it should work.

I suggest looking at: https://v2.vuejs.org/v2/guide/ Scroll down a bit you and will see a few examples involving methods.