Tag: method

I have this script that uses the vue.js obtain data from a database MySQL to be displayed on a page HTMLevery time I click a button that calls the method synchronize, ie does not happen automatically. script in question:

$('#app').ready(function() {
    onDeviceReady();
});
function onDeviceReady(){
var vm = new Vue({
        el: '#app',
        data:{
            noticias: (),
            turismos: (),
            videos:(),
            programacoes: ()
        },
        methods:{
            sync:function(){
                $.ajax({
                    dataType: 'json',
                    url: 'database/noticia.php',
                    success:function(dados){
                        localStorage.setItem('noticias',JSON.stringify(dados));
                        vm.setNoticias();
                    },

    }),
            $.ajax({
                dataType: 'json',
                url: 'database/turismo.php',
                success:function(dados){
                    localStorage.setItem('turismos',JSON.stringify(dados));
                    vm.setTurismos();
                },

     }),
        $.ajax({
            dataType: 'json',
            url: 'database/video.php',
            success:function(dados){
                localStorage.setItem('videos',JSON.stringify(dados));
                vm.setVideos();
            },
    }),
        $.ajax({
            dataType: 'json',
            url: 'database/programacao.php',
            success:function(dados){
                localStorage.setItem('programacoes',JSON.stringify(dados));
                vm.setProgramacoes();
            },
            error:function(){
                alert("ocorreu um erro durante a conexão com o servidor!");
            }
    });

        },
        setNoticias:function(){
            this.noticias = JSON.parse(localStorage.getItem('noticias'));
            console.log(this.noticias);
        },
        setTurismos:function(){
            this.turismos = JSON.parse(localStorage.getItem('turismos'));
            console.log(this.turismos);
        },
        setVideos:function(){
            this.videos = JSON.parse(localStorage.getItem('videos'));
            console.log(this.videos);
        },
        setProgramacoes:function(){
            this.programacoes = JSON.parse(localStorage.getItem('programacoes'));
            console.log(this.programacoes);
        },
    },
    ready:function(){
         this.setNoticias();
         this.setTurismos();
         this.setVideos();
         this.setProgramacoes();
        }
    });
}

the button that calls the method synchronize:

Atualizar

The problem with the script is having to click the button to update the data or call it for the first time. I would like to be able to call the method. synchronize with JavaScript so be able to do a function that can be performed whenever the page is ready.

On the site of vue.js click here to go to him in the example two (2) everything at the end of the code indicates that it is possible. I will leave below the example in question with the existing comment mentioned above:

  
  Cumprimentar

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define métodos dentro do objeto `methods`
  methods: {
    greet: function (event) {
      // `this` dentro de métodos aponta para a instância Vue
      alert('Olá ' + this.name + '!')
      // `event` é o evento DOM nativo
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// você pode invocar métodos no JavaScript também
example2.greet() // => 'Olá Vue.js!'

I did the test, but without success, and I still wonder how to call the method via a Java script automating data synchronization, thus enhancing the user experience.

—> Click here to see my application with the script mentioned above