CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Filipe Costa
Filipe Costa

Reputation: 555

two way binding not working with table rows and cols

I have 2 inputs, called col and row which i can change and they are related to the columns and rows of a table.

I want to see that table and edit his content, at the moment i have a v-model that updates my data with the row and columns, and need to put that in my v-for for the table so the table should get automaticly updated.

The problem is that the table is not getting updated.

This is what i have:

<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,
    }
}

Any help?

Upvotes: 1

Views: 465

Answers (1)

Tomer
Tomer

Reputation: 17930

The table is not updated since you did not bind the text field to any model.

you need to add an @input event and update the model when it fires

<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
  }
}

Obviously this would change it for the entire table, you can change table.row to be a more complex object with text, and then change the text for each row

Upvotes: 2

Related Questions