어레이에서 구성 요소 삭제, vuejs에서 잘못된 구성 요소 제거

어레이에서 구성 요소 삭제, vuejs에서 잘못된 구성 요소 제거

어레이에서 특정 컴포넌트를 삭제할 수 있어야 합니다.이 작업은 스플라이스를 사용하여 수행하며 해당 컴포넌트 정의는 어레이에서 삭제되지만 vuej는 잘못된 컴포넌트를 삭제합니다.마지막으로 추가한 컴포넌트를 항상 삭제합니다.

여기에 그것을 실증할 수 있는 바이올린이 있습니다.

https://jsfiddle.net/wjjonm8n/

다음은 무슨 일이 일어나고 있는지를 보여주는 비디오입니다.

https://maxniko.tinytake.com/sf/MTg3NTI5NF82MDIxNDAx

다음은 몇 가지 코드입니다.

Vue.component('row-component', {
    props: ["rowData", "uniqueId"],
    mounted: function() {
        console.log('mounting: ' + this.uniqueId)
    },
    beforeDestroy: function() {
      console.log('removing: ' + this.uniqueId)
    },
    template: `
        <div>
            row component: {{rowData}}
            <button @click="$emit('delete-row')">Delete</button>
        </div>`
})

new Vue({
    el: '#app',
    template: `
        <div>
            <row-component v-for="(row, index) in rows" :row-data="row" :uniqueId="index" v-on:delete-row="deleteThisRow(index)"></row-component>
            <button @click="add()">add</button>
        </div> 
    `,
    data: {
        rows: ["line1", "line2", "line3", "line4", "line5"],

    },
    methods: {
            add() {
            this.rows.push('line'+(this.rows.length+1))
        },
        deleteThisRow: function(index) {
            this.rows.splice(index, 1)

            console.log(this.rows)
        }
    }
})

이 함수는 vuej가 실제로 무엇을 제거하는지 알려줍니다.

    beforeDestroy: function() {
      console.log('removing: ' + this.uniqueId)
    }

console.log 함수가 출력하는 내용을 보면 마지막으로 추가된 컴포넌트가 삭제됩니다.이것은 각 컴포넌트의 마운트 상에 그 컴포넌트만을 위한 청취자를 작성하기 때문에 발생합니다.

this.$bus.$on('column-'+this.uniqueId+'-add-block', this.handlerMethod)

vue가 마지막 구성 요소를 제거하면 이 이벤트 수신기가 더 이상 작동하지 않습니다.

어떻게 하면 해결할 수 있을까요?

내 응용 프로그램에서는 다음과 같이 하위 구성 요소를 만듭니다.

let column = new Object()
column.uniqueId = this._uid+'-column-' + this.addedColumnCount
column.text = '1/2'
this.columnList.push(column)
this.addedColumnCount = this.addedColumnCount + 1

컴포넌트를 추가할 때 컴포넌트의 uniqueId를 작성하는 방법에 주의해 주십시오.

column.uniqueId = this._uid+'-column-' + this.addedColumnCount

컴포넌트를 삭제하려고 하면 uniqueId가 마지막으로 추가된 컴포넌트가 삭제되고 있다는 메시지가 나타납니다.

    beforeDestroy: function() {
        this.$bus.$off('column-'+this.uniqueId+'-add-block', this.handlerMethod)
        console.log('removing: ' + this.uniqueId)
    },

를 가지고 있지 않습니다.:key바인딩을 사용하여 Vue에 어떤 행이 어떤 구성 요소와 함께 가는지 알려줍니다.Vue는 바로 가기를 사용하여 보기를 보기 모델의 상태와 동일하게 표시합니다.추가한다면:key="row"에게v-for,그건 효과가 있다.

업데이트된 바이올린

언급URL : https://stackoverflow.com/questions/45710853/deleting-component-from-array-vuejs-removes-wrong-component