스플라이싱 어레이가 테이블 행 Vuej를 다시 렌더링하지 않음

스플라이싱 어레이가 테이블 행 Vuej를 다시 렌더링하지 않음

Ajax 요청 데이터로 생성된 사용자 테이블이 있습니다.표는 대략 다음과 같습니다.테이블 이미지

관리자가 사용자의 사용자 이름을 편집할 때 사용자의 행이 변경사항(특히 사용자의 이름과 성)으로 다시 렌더링되도록 합니다.

저는 테이블을 잘 만듭니다.모델은 정상적으로 동작합니다.부모 컴포넌트는 편집된 데이터를 edit() 메서드로 정상적으로 수신하지만 타깃 행을 변경된 데이터로 다시 렌더링할 수 없습니다.타깃 행을 업데이트하려면 어떻게 해야 합니까?

다음을 시도했지만 작동하지 않았습니다.

• vueJs 어레이 목록의 특정 행을 업데이트하려면 어떻게 해야 합니까?
• https://vuejs.org/v2/guide/list.html#Caveats
  • 행의 키를 설정했습니다.
  • vue.set()을 사용하여 list Of Users 설정을 시도했습니다.
  • 스플라이스 대신 Vue.set()을 사용해 보았다.

다음은 부모 vue 컴포넌트입니다(관련되지 않은 세부 정보는 삭제했습니다).

템플릿:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email Address</th>
            <th>Created</th>
            <th>Stat</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(user, index) in listOfUsers" :key="'row' + user._id"> 
            <td>{{user.first_name + ' ' + user.last_name}}</td>
            <td>{{user.email}}</td>
            <td>{{user.created}}</td>
            <td>
                <a v-if="user.confirmed" @click="determineButtonClicked(index, 'confirm')"></a>
                <a v-else @click="determineButtonClicked(index, 'unconfirm')"></a>
            </td>
            <td class="buttonCase">
                <a @click="determineButtonClicked(index, 'info')"></a>

                <a v-if="user.blocked" @click="determineButtonClicked(index, 'blocked')"></a>
                <a v-else @click="determineButtonClicked(index, 'block')"></a>

                <a v-if="user.enforce_info === 'required'" @click="determineButtonClicked(index, 'enforceInfoActive')"></a> 
                <a v-else-if="user.enforce_info === 'done'" @click="determineButtonClicked(index, 'enforceInfoChecked')"></a>
                <a v-else @click="determineButtonClicked(index, 'enforceInfo')"></a>

                <modal v-if="usersList[index]" @toggleClickedState="setState(index)" @editUser="edit(index, $event)" :id="user._id" :action="action"></modal>
            </td>
        </tr>
    </tbody>
</table>

대본

<script>
    export default {
        created: function() {
            let self = this;
            $.getJSON("/ListOfUsers",
            function(data){
                self.listOfUsers = data;
            });
        },
        data: function() {
            return {
                listOfUsers: [],
            }
        },
        methods: {
            edit(index, update){
                let user = this.listOfUsers[index];
                user.firstName = update.firstName;
                user.lastName = update.lastName;

                // this.listOfUsers.splice(index, 1, user)
                this.listOfUsers.$set(index, user)
            }
        }
    }
</script>

시간 내주셔서 감사합니다!

개체 자체가 교체되지 않기 때문에 Vue가 편집 메서드에서 업데이트되지 않습니다.개체의 속성은 변경되지만 Vue는 변경할 개체 참조만 찾습니다.

배열이 실제 개체 참조의 변경을 감지하도록 하려면 개체를 수정하지 않고 바꾸어야 합니다.어떻게 하고 싶은지는 모르겠지만, 이 해킹된 바이올린을 통해 문제를 설명할 수 있을 것입니다.http://jsfiddle.net/tga50ry7/5/

즉, 다음과 같이 편집 방법을 갱신하면 템플릿에서 재렌더가 발생합니다.

methods: {
   edit(index, update){
      let currentUser = this.listOfUsers[index];
      let newUser = {
         first_name: update.firstName,
         last_name: update.lastName,
         email: currentUser.email,
         created: currentUser.created
      }

      this.listOfUsers.splice(index, 1, newUser)
   }
}

이런 식으로 시도해 보세요.

<script>
    export default {
        created: function() {
            let self = this;
            $.getJSON("/ListOfUsers",
            function(data){
                self.listOfUsers = data;
            });
        },
        data: function() {
            return {
                listOfUsers: [],
            }
        },
        methods: {
            edit(index, update){
                let user = this.listOfUsers[index];
                user.firstName = update.firstName;
                user.lastName = update.lastName;

                // this.listOfUsers.splice(index, 1, user)
                this.$set(this.listOfUsers,index, user)
            }
        }
    }
</script>

언급URL : https://stackoverflow.com/questions/51975190/splicing-array-does-not-re-render-table-row-vuejs