laravel 5.3和Vuejs Ajax在选择框上调用

Question

i want a newly added record to be viewed on a select box once a new record has been inserted in the table, here is my laravel html code

 <div class="form gorup">
        <select  class="form-control" >

                <option @click="called"  v-for="task in list" >@{{task.body}}</option>

       </select> 
</div>

Here is the vue js code that fetches the data using ajax.

<script>
    });
    new Vue({
        el: 'body',

       data: function(){
        return{
            list:[]
         };
        },
        methods: {

           called: function(){

               $.getJSON('api/tasks', function (tasks) {
                   this.list = tasks;
                   console.error();
               }.bind(this));

           },
        },
    });

</script>

here is the code from laravel route function that produces the task items

Route::get('api/tasks', function(){

return App\Task::latest()->get();

});

So my idea is that if a user clicks on the select box it executes the ajax code, fetches the records and displays the data in the <option></option> tags

Answer 1

is there a better way to make the code work better because currently i have to click the the select box twice for it to pull new data. ?

why not after you mounted(ready) or insert a new data(new list) and just pull the new records there and insert it to your this.list = tasks;

new Vue({
data : {
list  = []
},

ready : function(){
  this.initialize();
},
methods : {

initialize : function(){
   let self = this;
   $.get('url',function(response)
      {
          self.list = response.task
      }

},
createNewTask: function(){
       let self = this;
       $.post('url',{data},function(response)
          {
              self.list = response.task
          }

    }

}
})

you should not put your ajax pull from your select box as it will consume a time to pull new data from server and put it to your list array

.