vuejs how to v-PHP Tutorial-php.cn

vuejs how to v

WBOY

Release： 2016-09-26 08:27:20

Original

1482 people have browsed it

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>

Copy after login

Then in the method

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

Copy after login

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.