vue.jsの要素を動的に追加する

Question

tl; dr：次のような編集可能なセルを含む表を生成しています。私はそれを持っているので、セルは編集可能であり、全体的な更新がありますが、私は実際に新しい行と列を追加するために必要なプロセスを理解するのには苦労しています。

合計を除いてセルの全ては、例えば、セル[EX1]のために、エンドユーザによって編集可能である[ITEM1]次に、更新されたイベントを引き起こす、150に100から変更することができます320 370に

からその行のその合計当初私のようなメインVueの要素を初期化JSファイルで

<div class="container" id="app"> 

    <script type="text/x-template" id="datagrid-template"> 
     <table class="table-striped"> 
      <thead> 
       <headerrow v-bind:columns="columns"></headerrow> 
      </thead> 

      <tbody> 
      <datarow v-for="row in rows" v-bind:columns="columns" v-bind:data="row"></datarow> 
      </tbody> 
     </table> 
    </script> 

    <div class="row"> 
     <div class="col-sm-10"> 
      <datagrid v-bind:columns="columns" v-bind:data="rows"></datagrid> 
     </div> 
     <div class="col-sm-2"> 
      <div class="row"> 
       <button type="button" v-on:click="addColumn()">Add Column</button> 
      </div> 
      <div class="row"> 
       <button type="button" v-on:click="addRow()">Add Row</button> 
      </div> 
     </div> 
    </div> 
</div> 

... HTMLファイル内のメインテンプレートを定義...

var app = new Vue({ 
    el: "#app", 
    data: { 
    categories: [...], 
    companies: [...] 
    }, 
    methods: { 
    addRow: function() { 
     console.log(this.$children[0]); 
    }, 
    addColumn: function() { 
     this.$children[0].columns.push({value: 'test'}); 
    } 
    } 
}); 

I次いで6つの主異なるコンポーネントタイプを持っている

：

• データ入力
• dataheader（延びデータ入力）（一般的な入力セル）
• datacell
• baserow（行の（データ入力を拡張）テーブル）
• headerrow（dataheadersで構成されるベースライン）
• datarow（e datacells成るxtendsのbaserow）

Iは、

baserow

var baseRow = { 
    render: function(createElement) { 
    return createElement('tr', {}, this.getProps(createElement)); 
    }, 
    props: {...} 
    } 
}; 

headerrow

Vue.component('headerrow', { 
    mixins: [baseRow], 
    methods: { 
    getProps: function(createElement) { 
     var comps = []; 
     this.$options.propsData.columns.forEach(function(el) { 
     comps.push(createElement('dataheader', { 
      props: {...} 
     })); 
     }); 
     return comps; 
    } 
    } 
}); 

Iがクリックすると、行および細胞を介して追加列を追加する私は 'テスト'が共同に追加されるのを見ることができますクロムエクステンションを使用して<datagrid>を見るときは、さらに、私は、 'テスト'が<headerrow>カラムのpropに追加されるのを見ていますが、UIの何も実際には生成されません。私はこれが最初に行と列をどのようにレンダリングしたかの結果であると仮定しています。そして、私は基本的な誤解のちょっとしたことしか持っていないと思います...誰かがどこまで、

Answer 1

あなたは<tbody>内<tr>以外のものを使用することはできません。だから、それは根本的な誤解だった

<tbody> 
    <tr is="datarow" v-for="row in rows" v-bind:columns="columns" v-bind:data="row"></tr> 
</tbody> 

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.