Heim  >  Artikel  >  Backend-Entwicklung  >  vuejs wie man v

vuejs wie man v

WBOY
WBOYOriginal
2016-09-26 08:27:201465Durchsuche

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>

Dann in der Methode

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

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.

Stellungnahme:
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