laravel 5.3 和 Vuejs Ajax 调用选择框答案

【问题标题】：laravel 5.3 and Vuejs Ajax call on select boxlaravel 5.3 和 Vuejs Ajax 调用选择框
【发布时间】：2017-06-22 15:03:47
【问题描述】：

我希望在表格中插入新记录后在选择框中查看新添加的记录，这是我的 laravel html 代码

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

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

       </select> 
</div>

这里是使用 ajax 获取数据的 vue js 代码。

<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>

这是来自 laravel 路由函数的代码，用于生成任务项

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

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

});

所以我的想法是，如果用户点击选择框，它会执行 ajax 代码，获取记录并在 <option></option> 标签中显示数据

【问题讨论】：

在列表中添加任务的代码在哪里，created只会被调用一次。
你用的是vue 1还是2？
有没有更好的方法让代码工作得更好，因为目前我必须点击选择框两次才能提取新数据。

标签： javascript php jquery ajax vue.js

【解决方案1】：

有没有更好的方法让代码更好地工作，因为目前我必须单击选择框两次才能提取新数据。 ?

为什么不在你挂载（准备好）或插入一个新数据（新列表）之后将新记录拉到那里并将其插入到你的 this.list = 任务中；

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
          }

    }

}
})

你不应该把你的 ajax 从你的选择框中拉出来，因为它会消耗一些时间来从服务器拉新数据并将它放到你的列表数组中

【讨论】：