Vue変数を隠し入力v-modelビュー（v-for）に渡すことができません

Question

Vue JSの新機能です。Laravel Sparkを使用してアプリケーションを構築しています。できるだけVueを利用しようとしています。

私は単に、コンポーネントで '資産の種類'を追加するフォームがあります。資産タイプが正常に作成されると、プロパティのリストがデータベースから取得され、 'データ'属性に設定されます。 （私はインラインテンプレートを使用しています）私は、プロパティIDとタイプIDの2つの隠れた入力を持つ各プロパティのフォームを作成する 'v-for'と、新しく作成された型へのプロパティ。

問題： vモデルを使用しているときに、非表示入力の値をビュー内に割り当てることができません。フォームの1つを送信すると、フォーム要求データは常に新しいSparkFormオブジェクトの初期データ値を返します。

つまり、ビューのv-forループ内に隠れた入力値を割り当てる必要があります。ここで

は私のコンポーネントです：

Vue.component('new-asset-type', { 
props: [], 
data() { 
    return { 
     // type_id: this.type_id, 
     properties: this.properties, 


     newAssetType: new SparkForm({ 
      label: null, 
      enabled: false, 
     }), 
     assignPropForm: new SparkForm({ 
      prop_id: "", 
      type_id: "", 
     }), 
    }; 
}, 
methods: { 
    createType: function() { 
     Spark.post('/asset-types', this.newAssetType) 
      .then(response => { 
       this.type_id = response.type_id; 
       axios.get('/getTypeNotProps/' + this.type_id).then((response) => { 
        this.properties = response.data; 
        console.log(this.properties); 
       }); 
      }) 
      .catch(response => { 
       console.log("fail"); 
      }); 
    }, 
    assignProp: function() { 
     Spark.post('/asset-properties/add', this.assignPropForm) 
      .then(response => { 
       console.log(response); 
      }) 
      .catch(response => { 
       console.log("fail"); 
      }); 
    } 
} 

}）;

そして、ここに私の見解です：有益なコメントに

@extends('spark::layouts.app') 

@section('content') 
<new-asset-type inline-template> 
    <div class="container"> 
     <!-- Application Dashboard --> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Add a New Asset Type</div> 

        <div class="panel-body" id="addTypeForm"> 


         <div class="form-horizontal"> 
          <div class="form-group" :class="{'has-error': newAssetType.errors.has('label')}"> 
           {{ Form::label('label', 'Label', ['class' => 'col-md-4 control-label']) }} 
           <div class="col-md-6" > 
            <input type="test" name="label" v-model="newAssetType.label"> 

            <span class="help-block" v-show="newAssetType.errors.has('label')"> 
             @{{ newAssetType.errors.get('label') }} 
            </span> 

           </div> 
          </div> 
          <div class="form-group"> 
           {{ Form::label('enabled', 'Enabled?', ['class' => 'col-md-4 control-label']) }} 
           <div class="col-md-6">       
            <input type="checkbox" name="enabled" v-model="newAssetType.enabled" > 
           </div> 
          </div> 

          <!-- Submit --> 
          <div class="form-group"> 
           <div class="col-md-8 col-md-offset-4"> 

            <button class="btn btn-primary" @click="createType" :disabled="newAssetType.busy"> 
             Create Asset Type 
            </button> 
           </div> 
          </div> 
          <div id="assignProps" v-if="newAssetType.successful"> 
           <!-- Button trigger modal --> 
           <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
            Add Property 
           </button> 

           <!-- Modal --> 
           <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
            <div class="modal-dialog" role="document"> 
            <div class="modal-content"> 
             <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
             <h4 class="modal-title" id="myModalLabel">Add New Property to Asset Type</h4> 
             </div> 
             <div class="modal-body"> 

              <assign-asset-prop v-for="property in properties" class="panel panel-info property-item"> 
               <div class="panel-heading">@{{ property.label }}</div> 
               <div class="panel-body"><strong>Input Type: </strong>@{{ property.input_type }} 
                <div class="pull-right"> 
                 <input type="hidden" name="prop_id" v-bind:value="property.p_id" v-model="assignPropForm.prop_id"> 
                 <input type="hidden" name="type_id" v-bind:value="property.p_id" v-model="assignPropForm.type_id"> 

                 <button class="btn btn-primary" @click="assignProp" :disabled="assignPropForm.busy"> 
                  Add 
                 </button> 
                </div> 

               </div> 
              </assign-asset-prop> 

             </div> 
             <div class="modal-footer"> 
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
             <button type="button" class="btn btn-primary">Save changes</button> 
             </div> 
            </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</new-asset-type> 
@endsection 

Answer 1

おかげで、私はすべての隠された入力を使用されていないことを学びました。代わりに、単に変数をclickイベントの関数に渡しました。

<button class="btn btn-primary" @click="assignProp(type_id, property.p_id)" > 
    Add 
</button> 

その後、私のコンポーネント

methods: { 
     assignProp: function (type_id, property_id) { 
      var assignPropForm = new SparkForm({ 
       propvalue: property_id, 
       typevalue: type_id, 
      }); 

      Spark.post('/asset-properties/add', assignPropForm) 
       .then(response => { 
        console.log(response); 
       }) 
       .catch(response => { 
        console.log("fail"); 
       }); 
     } 
    }