How to use v-if in vuejs - Stack Overflow

I just started to connect to vuejs, and now there is a problem like this. I want to realize that the data in a table is ordinary text data when viewed. Once the edit button of each row is clicked, the data of this row is displayed in the input input box. Implementation,
My initial idea is this: add an editmode attribute to the data of this column, once the edit button is clicked, change the editmode to true, and then v-if determines the output style based on this value:

<code><table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>name</th>
                            <th>pass</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="data in apidata" track-by="$index">
                            <tr>
                                <td>{{$index + 1}}</td>
                                <td>
                                    <div v-if="data.editmode"><input v-model="data.name"></div>
                                    <div v-else>{{data.name}}</div>
                                </td>
                                <td>
                                    <div v-if="data.editmode"><input v-model="data.name"></div>
                                    <div v-else>{{data.name}}</div>
                                </div>
                                </td>
                                <td>
                                    <button v-on:click="remove($index)" class="btn btn-danger">删除</button>
                                    <button v-on:click="edit(data)" class="btn btn-danger">编辑</button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table></code>

Then in the method

<code>            edit: function(data){
                //alert(data.editmode);
                data.editmode = true;
            }</code>

I can see that every time I do this, the editmode does change to true, but that row of data does not change to the input mode. I would like to ask for advice on how to implement it.

Reply content:

I just started to connect to vuejs, and now there is a problem like this. I want to realize that the data in a table is ordinary text data when viewed. Once the edit button of each row is clicked, the data of this row is displayed in the input input box. Implementation,
My initial idea is this: add an editmode attribute to the data of this column, once the edit button is clicked, change the editmode to true, and then v-if determines the output style based on this value:

<code><table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>name</th>
                            <th>pass</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="data in apidata" track-by="$index">
                            <tr>
                                <td>{{$index + 1}}</td>
                                <td>
                                    <div v-if="data.editmode"><input v-model="data.name"></div>
                                    <div v-else>{{data.name}}</div>
                                </td>
                                <td>
                                    <div v-if="data.editmode"><input v-model="data.name"></div>
                                    <div v-else>{{data.name}}</div>
                                </div>
                                </td>
                                <td>
                                    <button v-on:click="remove($index)" class="btn btn-danger">删除</button>
                                    <button v-on:click="edit(data)" class="btn btn-danger">编辑</button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table></code>

Then in the method

<code>            edit: function(data){
                //alert(data.editmode);
                data.editmode = true;
            }</code>

I can see that every time I do this, the editmode does change to true, but that row of data does not change to the input mode. I would like to ask for advice on how to implement it.