vuejs how to v

WBOY
Release: 2016-09-26 08:27:20
Original
1432 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.

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!