So i'm trying to reorder the Documents array when a document gets deleted. My document array looks something like this:

[
    {
        "id": 1,
        "name": "document1"
        "document_number": 1,
    },
    {
        "id": 30,
        "name": "document2"
        "document_number": 2,
    },
    {
        "id": 4,
        "name": "document3"
        "document_number": 3,
    },
    {
        "id": 4,
        "name": "document4"
        "document_number": 4,
    }
]

now if user deletes "document2" I want to reactively change "document_number" for document3,document4 to "2","3".

What I am trying:

reorderDocuments(document_number){
            //filtering all documents that have "document_number" higher then the deleted document
            const filteredDocuments = this.Documents.filter(function (e) {
                return e.document_number > document_number;
            });
            //the filtering works as intended so now I use a for loop to loop thru all those documents
            for(var i = 0; i < filteredDocuments.length; i  ){
                //here i am getting index of the document that i want to change
                this.index = this.Documents.findIndex(x => x.id === filteredDocuments[i].id);
                //the new number that should take place for document_number
                const newNumber = filteredDocuments[i].document_number - 1;

                //then im using $set to set that new number for the document
                //here is where i get an error
                this.Documents.document_number.$set(this.index, newNumber);
            }
        },

whats wrong?

error:

TypeError: Cannot read properties of undefined (reading '$set')

CodePudding user response：

vm.$set or this.$set instance method, which is an alias to the global Vue.set. Generally we use it set vuex states. Therefore I recommend you to use

this.Documents[this.index]. document_number = newNumber;