javascript - 使用 vue js 在 laravel 中形成模式绑定(bind)

Question

我有 2 个模型 Tour.php

public function Itinerary()
{
    return $this->hasMany('App\Itinerary', 'tour_id');
}

和Itinerary.php

public function tour() 
{
    return $this->belongsTo('App\Tour', 'tour_id');
}

游览表:

id|title|content

行程表:

id|tour_id|day|itinerary

在 tour-edit.blade.php View 中，我使用 vue js 创建或添加和删除 day 和 plan 的输入字段动态地。

代码在tour-create.blade.php

 <div class="row input-margin" id="repeat">
      <div class="col-md-12">
        <div class="row" v-for="row in rows">
          <div class="row">
            <div class="col-md-2">
              <label >Day:</label>
              <input type="text" name="day[]" 
              class="form-control">            
            </div>
            <div class="col-md-8">
              {{ Form::label('itinerary', " Tour itinerary:", ['class' => 'form-label-margin'])}}
              {{ Form::textarea('itinerary[]',null, ['class' => 'form-control','id' => 'itinerary']) }}
            </div> 
            <div class="col-md-2">
              <button class="btn btn-danger" @click.prevent="deleteOption(row)">
              <i class="fa fa-trash"></i></button>
            </div>
          </div>

        </div>
        <div class="row">
          <button class="btn btn-primary add" @click.prevent="addNewOption" >
          <i class="fa fa-plus"></i> Add Field</button>

        </div>
      </div>
    </div> 

我想用它们各自的数据填充这些字段。但是所有数据，即属于旅游的行程都以 JSON 格式显示在 itinerary 文本框中。

我的 vue js 脚本是:

<script>
var App = new Vue({
el: '#repeat',
data: {
  day:1 ,
  rows:[
  @foreach ($tour->itinerary as $element)
    {day: '{{$element->day}}', plan: '{{$element->plan}}'},
  @endforeach
  ]
},

methods: {

  addNewOption: function() {
    var self = this;
    self.rows.push({"day": "","itinerary":""});
  },

  deleteOption: function(row) {
    var self = this;
    self.rows.splice(row,1);
  },

}
});
</script>

Answer 1

我会避免将 blade 混入 JavaScript，相反，最好的选择是对 api 路由进行 ajax 调用，该路由在 json 中返回您的数据，然后可以由 Vue 处理:

methods:{
  getItinerary(){
     axios.get('api/itinerary').then(response => {
        this.itinerary = response.data;
     })
  }
}

但是，通过这种方法，您可能需要使用 vue-router 而不是 laravel 网络路由，这将我们置于 SPA 领域。

如果那不是一个选项(即你仍然想使用 blade 模板)，你应该看看 this answer前几天我向您展示了如何从 Blade 模板初始化数据。

您 似乎正在做的是使用 laravel 的表单模型绑定(bind)来填充您的表单，而不是 Vue，因此您的模型数据未绑定(bind)到 View 。因此，您需要决定要使用哪一个。如果它是 vue，你只想使用普通形式并使用 v-model 将底层数据绑定(bind)到它:

现在 View 中的任何更新都将由 Vue 自动更新。我整理了一个 JSFiddle，假设您希望继续使用 Laravel 网络路由和 Blade 模板来向您展示解决此问题的一种方法:https://jsfiddle.net/w6qhLtnh/