vuejs v 방법-PHP 튜토리얼-php.cn

vuejs v 방법

WBOY

풀어 주다： 2016-09-26 08:27:20

원래의

1483명이 탐색했습니다.

방금 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로 변경되지만 해당 데이터 행은 입력 모드로 변경되지 않는 것을 볼 수 있습니다. 구현 방법에 대해 조언을 구하고 싶습니다.