vuejs v 방법

WBOY
풀어 주다: 2016-09-26 08:27:20
원래의
1463명이 탐색했습니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿