[Vuejs]-My data model in vuejs is not updating and the query is correct

by

0👍

✅

Your ajax request probably has an error you are not handling:

checkSignInSheet: async function () {
    try {
        var vm = this;
        var __REQUESTDIGEST = '';
        let data = await $.ajax({
            url: "www.mydomain.com/_api/web/lists/getbytitle(sheet')/items?$select=USERID&$filter=USERID eq '" + vm.USERID + "'",
            type: 'Get',
            headers: { accept: "application/json;odata=verbose" },
        });
        if (data == 'success'){
            vm.iExist = true;
            vm.iDoNotExist = false;
        }else if (data == 'failure') {
            vm.iExist = false;
            vm.iDoNotExist = true;
        }else{
            throw new Error('unknown data code');
        }
    }catch(e){
        vm.iDoNotExist = true;
        vm.iExist = false;
    }
}

new Vue({
    el: "#app",
    data: {
        iExist: false,
        iDoNotExist: false,
    },
    methods: {
        checkSignInSheet: function () {
            console.log('test')
            var vm = this;
            var __REQUESTDIGEST = '';
            var url = "www.mydomain.com/_api/web/lists/getbytitle(sheet')/items?$select=USERID&$filter=USERID eq '" + vm.USERID + "'";
            url = "www.google.com"; // for testing
            var headers = { accept: "application/json;odata=verbose" };
            $.ajax({
                url: url,
                method: 'GET',
                // headers: headers,
                success: function (data) {
                    console.log('data');
                    if (data == 'success') {
                        vm.iExist = true;
                    } else if (data == 'failure') {
                        vm.iDoNotExist = true;
                    }
                },
                error: function (xhr, status, error) {
                    console.log('Error', xhr.status, xhr.statusText, xhr.responseText);
                    vm.iDoNotExist = true;
                }
            })
        }
    },
    mounted: function () {
        this.checkSignInSheet();
    }

})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <span v-show="iExist">I do Exists</span>
  <span v-show="iDoNotExist">I do not Exist</span>
</div>

Leave a comment