双方向バインディングがテーブルの行と列で機能しない

Question

私は2つの入力を持っています。これは変更可能なcolとrowで、表の列と行に関連しています。

私はテーブルを参照してコンテンツを編集する必要があります。現時点では、私のデータを行と列で更新するv-modelがあり、それをテーブル用のv-forに配置する必要があります。自動的に更新されるはずです。

問題は、テーブルが更新されていないことです。

これは私が持っているものです。

<div class="col-md-2"> 
    <input type="number" min="1" v-model="table.rows" class="form-control" id="rows"> 
</div> 
<label for="columns" class="control-label col-md-1">columns:</label> 
<div class="col-md-2"> 
    <input type="number" min="1" v-model="table.cols" class="form-control" id="cols"> 
</div> 

<table class="table"> 
    <tbody v-for="row in table.rows"> 
     <tr> 
      <td contenteditable="true">John</td> 
     </tr>  
    </tbody> 
</table> 

data() { 
    return { 
     table: { 
      rows: 1, 
      cols: 1, 
      key: "Table", 
      tableStyle: 1, 
     }, 
     insert: 1, 
    } 
} 

任意のヘルプ？

Answer 1

テキストフィールドをどのモデルにもバインドしていないため、テーブルは更新されません。それは明らかに

<table class="table"> 
    <tbody v-for="row in table.rows"> 
    <tr> 
     <td contenteditable="true" @input="updateContent($event)">John</td> 
    </tr>  
    </tbody> 
</table> 

data() { 
    return { 
     table: { 
      rows: 1, 
      cols: 1, 
      key: "Table", 
      tableStyle: 1, 
      text: 'Default text' 
     }, 
     insert: 1, 
    } 
}, 
methods: { 
    updateContent (evt){ 
    //get the text 
    const text = evt.srcElement.innerText; 
    //update the model 
    this.table.text = text 
    } 
} 

を発射するとき

は、あなたは、テキストと、より複雑なオブジェクトであることをtable.rowを変更することができ、これは、テーブル全体のためにそれを変更します@inputイベントを追加してモデルを更新する必要があります各行のテキストを変更する