Home  >  Article  >  Backend Development  >  vuejs how to v

vuejs how to v

WBOY
WBOYOriginal
2016-09-26 08:27:201466browse

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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn