Question

我有2个输入，称为col和row，我可以更改它们，它们与表的列和行相关。

我希望看到该表并编辑他的内容，目前我有一个用行和列更新我的数据的v模型，并且需要将其放在我的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更改为带有文本的更复杂的对象，然后更改每行的文本

双向绑定不与表行和列一起使用

1 个答案: