방금 vuejs에 연결하기 시작했습니다. 이제 각 행의 편집 버튼을 클릭하면 테이블의 데이터가 일반 텍스트 데이터라는 것을 알고 싶습니다. 행을 입력으로 입력합니다.
내 초기 아이디어는 다음과 같습니다. 이 데이터 열의 데이터에 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>
이 작업을 수행할 때마다 편집 모드가 true로 변경되지만 해당 데이터 행은 입력 모드로 변경되지 않는 것을 볼 수 있습니다. 구현 방법에 대해 조언을 구하고 싶습니다.