unshift를 사용하여 어레이를 올바르게 업데이트하지 않음

unshift를 사용하여 어레이를 올바르게 업데이트하지 않음

도와주세요!!!!!

응용 프로그램이 시작되면 모든 피드를 얻기 위해 Ajax를 실행합니다.이러한 개체는 vue 변수인 배열에 저장합니다.

    props:['id'],
    data(){
        return {
            feedData: []
        } 
    },
    created(){
        axios.get('/feeds/'+this.id).then(response =>{
            this.feedData = response.data.data;
        });
    }

그 후, 유저가 새로운 투고를 입력해 송신하면, 새로운 투고를 데이타베이스에 보존해, 데이타베이스로부터 새로운 투고를 캡쳐 하는 이벤트를 송신합니다.이것을 위한 기능은 내 방법에 있다.

    methods: {
        captureFeed: function (feedId) {
            const vm = this;
            axios.get('/feeds/'+this.id+'/'+feedId).then(response =>{
                vm.feedData.unshift(response.data);
                console.log(response.data);
            });
        }
    },

이상한 점은 새로 작성한 피드를 정상적으로 입수하여 어떤 이유로든 Unshift를 사용하여 피드 배열에 추가하려고 하면 어레이의 첫 번째 게시물이 중복되어 페이지를 새로 고칠 때까지 새로운 게시물이 표시되지 않는다는 것입니다.콘솔 로그를 확인하면 새 피드를 얻었음을 알 수 있습니다.재밌는 건 제가 이걸 쓸 때

vm.feedData.push(response.data);

그것은 잘 작동하지만, 기둥은 내가 원하는 것이 아닌 맨 아래에 있다.

표시할 이미지가 있습니다.

첫 번째 투고:

첫 번째 투고 사진

두 번째 투고:

두 번째 투고 사진

여기서 중요한 문제는 컴포넌트를 루프할 때 키를 사용해야 한다는 것입니다.

2.2.0+에서는 구성 요소와 함께 v-for를 사용할 때 이제 키가 필요합니다.

이 경우 템플릿은 다음과 같습니다.

<feed v-for="feed in feedData" :key="feed.id" :feedContent="feed"></feed> 

어디에feed.id는, 각 피드 오브젝트내의 일의의 값입니다.이는 Vue의 DOM 업데이트 전략 때문입니다.키를 사용하면 Vue는 작성/파괴해야 할 컴포넌트를 식별할 수 있습니다.

템플릿에서 키 파라미터를 사용하고 있습니까?이렇게요?

 :key="<An ID>"

예:

<div  v-for="(item, index) in array" :key="item.id">
  {{index}} - {{item.name}}
</div>

언급URL : https://stackoverflow.com/questions/46331334/vue-not-updating-array-properly-using-unshift