剛開始接解vuejs,現在有個問題是這樣的,我想實現一個表格中的數據查看的時候是普通的text數據,一旦點擊每一行的編輯按鈕時,這一行的數據以input輸入框來實現,
我初步的設想是這樣的:給這一列資料的data加上一個editmode屬性,一旦點擊編輯按鈕後改成editmode為true,然後v-if根據這個值來決定輸出樣式:
<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>
然後在方法中
<code> edit: function(data){ //alert(data.editmode); data.editmode = true; }</code>
我可以看到每次這樣子做後,editmode確實改變成了true,但是那一行資料並沒有變成input模式,求教實作方法。