Question

我希望在表格中插入新记录后，在选择框中查看新添加的记录，这是我的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函数的代码，它生成任务项

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

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

}）;

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

Answer 1

是否有更好的方法使代码更好地工作，因为目前我必须单击两次选择框才能获取新数据。？

为什么不在你挂载（准备好）或插入新数据（新列表）之后，只需将新记录拉到那里并将其插入你的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
          }

    }

}
})

你不应该从你的选择框中放入ajax pull，因为它会花费一些时间从服务器提取新数据并将其放入列表数组

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

1 个答案: