VUEjs複数のテンプレートをテンプレート

Question

私は職場でvueと仕事をすることになりましたが、VUEと私はまだ友達ではありません。現在、解決する方法がわからないという問題に直面しています。私が持っている限られたVUE知識で、できる限り最高のことを説明します。

単純化し、私はこのようになりますVUEコンポーネント、持っている：

Vue.component('input-checkboxes', { 
    template: '#input_checkboxes', 
    props: ['id', 'label', 'list', 'required', 'readonly'] 
}); 

をそれから私はこのようになりますテンプレートがあります。

<template id="input_checkboxes"> 

    <div> 
     <div>{{ label }}</div> 
     <div> 

      <label v-for="list_item in list"> 

       <input type="checkbox" v-model="value" :name="id" :required="required" :readonly="readonly" value="{{ list_item.name }}"> {{ list_item.name }} 
      </label> 

     </div> 
    </div> 

</template> 

をその後、私は私ではなく、大きなVUEのインスタンスを持っていますここに関連する部分を貼り付けます。

この変数が作成されている：

var some_form = { 
    form : { 
     Endless: '', 
     Amounts: '', 
     Of: '', 
     Names: '', 
     In: '', 
     The: '', 
     Form: '', 
     THIS-ONE: '' 
    } 
}; 


var vm = new Vue({ 
    el: '#form_product', 
    data: $.extend({ 
     someStuff : 'some values', 
     someLists : {} 
    }, some_form), 
    ready: function() { 
     this.getLists(); // Fetches alot of lists 
    }, 
    methods: { 
     this.$http.get(
      framework.url('api','getLookupLists') 
     ).then(function (response) { 

      this.lists = response.body; 
      this.pageLoading = false; 
     }.bind(this)); 
    } 

最後に、私は私のhtmlページを持っている非常によく動作し、他の分野の負荷、の中で、この持っていること：だから

<input-checkboxes 
    id="THIS-ONE" 
    label="A Fitting Label" 
    :value.sync="form.SomeID" 
    :list="lists.AnAppropriateList"> 
</input-checkboxes> 

を、それはですセットアップの要点。私は入力テキストのような他の多くのコンポーネントを持っています、それはちょうど良い（他の誰かが私の前にそれを作った）、私は彼の方法をコピーしていくつかの要素を変更するだけで他のコンポーネントを作成しました。

チェックボックスが動作しない場合があります。私の問題は、多数の入力があり、それらの入力結果をVUEインスタンスにバインドする方法がわからないことだと思います。

私は本当にこれが理にかなっていることを願っています。なぜなら、どのように乗り出すべきかについてのいくつかの指針がほしいからです...もし誰かがこの設定を複製して本当に単純化していて、チェックボックスからの値の配列を、インスタンス？

Answer 1

あなたが作っている間違いがいくつかあります。

1. まず、値があなたを支える伝承配列である必要があります（それはあなたの例から文字列だよう だ）
2. valueが正しく設定されていない、あなたは:value="someValue"を行うことによって、それを設定する必要があります;あなたは属性に括弧を入れることはできません。

3. 最後に、値はおそらくアイテムのIDであり、名前ではありません。名前を使用すると、衝突の可能性があります。

   • ボーナス：あなたは、フォームのサーバー側に提出されていない限り、（すべてで:nameを使用する必要はありません...しかし、あなたはそれを行うだろう、なぜ私が見ることができません？。）

ここでは、これを総括するための簡単な作業例です：

HTML

​​

JS

var app = new Vue({ 
    el: 'main', 
    data: function() { 
    return { 
     value: [], 
     label: 'Label name', 
     readonly: false, 
     required: true, 
     list: [ 
     { 
      name: 'Item 1', 
      id: 'item1' 
     }, 
     { 
      name: 'Item 2', 
      id: 'item2' 
     } 
     ] 
    } 
    } 
}) 

私は0をも作りましたを試してみてください。