javascript - 双向绑定(bind)不适用于表行和列

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

表格没有更新，因为您没有将文本字段绑定(bind)到任何模型。

您需要添加一个@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 更改为更复杂的文本对象，然后更改每一行的文本