vuejs wie man v

WBOY
Freigeben: 2016-09-26 08:27:20
Original
1462 Leute haben es durchsucht

Ich habe gerade angefangen, eine Verbindung zu vuejs herzustellen. Ich möchte erkennen, dass es sich bei den Daten in einer Tabelle um normale Textdaten handelt, sobald auf die Schaltfläche „Bearbeiten“ jeder Zeile geklickt wird Zeile wird als Eingabefeld eingegeben, um Folgendes zu erreichen:
Meine ursprüngliche Idee ist folgende: Fügen Sie den Daten dieser Datenspalte ein Editmode-Attribut hinzu, ändern Sie nach dem Klicken auf die Schaltfläche Bearbeiten den Editmode auf true und dann auf v-if bestimmt den Ausgabestil basierend auf diesem Wert:

<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>
Nach dem Login kopieren

Dann in der Methode

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

Ich kann sehen, dass sich der Bearbeitungsmodus jedes Mal auf „True“ ändert, diese Datenzeile jedoch nicht in den Eingabemodus wechselt. Ich möchte um Rat fragen, wie man ihn implementiert.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage