双向绑定不能与表行和列共同工作

Question

我有2个输入，称为列和行，我可以改变，它们与表格的列和行有关。

我想查看表格并编辑他的内容，此刻我有一个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

由于没有将文本字段绑定到任何模型，表格未更新。

你需要添加一个@input事件和更新的模式，当触发

<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为与文字更复杂的对象，然后更改每行的文本