Rails 5.1コントローラにVueフォーム要素を投稿する

Question

いくつかのチェック項目をRailsコントローラに投稿しようとしていますが、正しく動作していないようです。

<%= form_for(listing, html: { id: listing.id, class: 'listing_form' }) do |f| %> 
    ... 

    <div v-for="(item, idx) in items"> 
    <label class="custom-control custom-checkbox"> 
     <input type="checkbox" class="custom-control-input" v-model="checkedItems[idx]" :value="item.id"> 
     <span class="custom-control-indicator"></span> 
     <span class="custom-control-description">{{ item.text }}</span> 
    </label> 
    </div> 

    ... 

    <div class="actions"> 
    <%= f.submit class: 'btn btn-success', 'v-on:click.prevent': 'submitListing' %> 
    </div> 
<% end %> 

と私のVueのコードは次のようになります：私のフォームで

私が持っている

if(document.getElementById('listing-multistep') != null) { 
    Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('input[name="authenticity_token"]').getAttribute('value'); 
    var listingForm = document.getElementsByClassName('listing_form')[0]; 
    var id = listingForm.dataset.id; 

    const listingForm = new Vue({ 
    el: '#listing-multistep', 
    data: { 
     id: id, 
     name: '', 
     city: '', 
     state: '', 
     address: '', 
     items: [ 
      {id: 0, text: "Item1"}, 
      {id: 1, text: "Item2"}, 
      {id: 2, text: "Item3"} 
     ], 
     checkedItems: [] 
    }, 
    methods: { 
     submitListing: function() { 
     var itemNames = [] 
     var checkedIndices = [] 

     // Probably a better way to do this... 
     // Get the indices of all checkedItems that are true 
     this.checkedItems.forEach((elt, idx) => { 
      if(elt === true){ checkedIndices.push(idx) } 
     }); 
     // Get the value of all the above indices  
     this.items.map((item) => { 
      if(checkedIndices.includes(item.id)){ 
      itemNames.push(item.text); 
      } 
     }); 

     var listingObj = { 
      id: this.id, 
      name: this.name, 
      city: this.city, 
      state: this.state, 
      address: this.address, 
      items: itemNames // <--- this is an array of items which isn't filtering through to Rails in the POST request 
     } 

     if(this.id == null) { 
      console.log(listingObj) 
      // POST the listingObj if it's a new listing 
      this.$http.post('/listings', {listing: listingObj}).then(
      response => { 
       window.location = `/listings/${response.body.id}` 
      }, response => { 
      console.log(response) 
      }) 
     } else { 
      // PUT the listingObj if it's an existing listing 
      this.$http.put(`/listings/${this.id}`, {listing: listingObj}).then(
      response => { 
       window.location = `/listings/${response.body.id}` 
      }, response => { 
      console.log(response) 
      }) 
     } 
     } 
    } 

データのほとんどは全体送られているとリストが生成されている間は、問題配列itemsがRailsコントローラに到達しないということです。 schema.rbに次のように

私のデータベースには、（その配列フィールドが可能でなければなりません）はPostgreSQLであり、データベースに提出された項目が定義されています：

t.text "items", default: [], array: true 

私はそれが私の中に強いのparamsを通過することを可能にするのですコントローラ：

class ListingsController < ApplicationController 

    ... 

    private 
    def listing_params 
    params.require(:listing).permit(
     :name, 
     :city, 
     :state, 
     :address, 
     :items) 
    end 
end 

しかしlistingObのitemsフィールドがレールに渡って実施されていない理由を把握することはできません。なぜこれが起こっているのでしょうか？

ありがとうございます。

Answer 1

ちょっと分かりました。配列フィールドを許可するRailsの強力なパラメータは次のようになります：

def listing_params 
    params.require(:listing).permit(
    :name, 
    :city, 
    :state, 
    :address, 
    :items => [] 
) 
end 

が今すぐ動作します！