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.
