array.slice strange behaviour with nuxt-edge

EDIT AND SOLVED: I've found the origin of the problem: I thought arr.slice returned the new array but, actually, it returns the deleted element. See the documentation The solution is simply to put the slice function before the bracket and not in it:

    remove (index) {
      const arrayCopy = this.liens.slice()
      arrayCopy.splice(index, 1)
      this.$emit('update:liens', arrayCopy)

    }

Thank you kissu for your time!


I was previously using nuxt 2.xx and since switching to nuxt-edge the vue behavior changed with array.slice. Let me explain :

My code is very basic and is used to add/remove items of an array in a child component "stockLiens". This array is passed to a parent component "currentEtabCommentUser" via .sync

Everything was working fine before but since I'm with nuxt-edge, if I have - for instance - an array of 3 items and I want to delete the 2nd one, it is the only item left!

My stockLiens component Javascript is the following:

props: {
    liens: {
      type: Array,
      default: () => []
    }
},
methods: {
    // I used concat() and slice() to avoid mutating a prop in the component
    add () {
      const arrayConcat = this.liens.concat([{ url: '', description: '' }])
      this.$emit('update:liens', arrayConcat)
    },
    remove (index) {
      const arrayCopy = this.liens.slice()
      console.log(this.liens) // line 108
      console.log(arrayCopy) // line 109
      this.$emit('update:liens', arrayCopy.splice(index, 1))
      console.log(arrayCopy) // line 111
    }
}

When I run the script, the text in the firefox console is the following:

I'm not allowed to publish picture yet so it's a link On the picture, you can see that :

  • stockLiens:108 is an array of 3 items (it makes sense since it is this.liens)
  • stockLiens:109 is an array of 2 items! (strange since it's a simple array.slice() of this.liens) The 2 items are the old index 0 and the old index 2 (I've clicked on old index 1)
  • stockLiens:111 is the same array that on line 109. (strange again because it should have been spliced in line 110)
  • currentEtabCommentUser:186 is an array of 1 item : the old index 1 (since line 186 is just a listener on this.liens, it should be the same array that on stockLiens:111. I really don't understand anything!)

My currentEtabCommentUsercomponent:

<stockLiens
   :liens.sync="liens"
/>

<script>
  watch: {
    liens () {
      console.log(this.liens) // line 186
    }
  }
</script>

I've tried to change .sync, to copy the array with for(i...), to get() / set(v) the liens property, ... I've looked on many forum during hours (2 days now) but I can't understand the problem.

Can someone help me please ? Thank you in advance!

My stockLiens component HTML:

<v-card
   v-for="(url, i) in liens"
  :key="i"
>
            <v-text-field
              v-model="url.url"
              label="Url"
            />
            <v-text-field
              v-model="url.description"
              label="Description"
            />
          <v-divider vertical />
          <v-btn
            icon
            @click="remove(i)"
          >
            <v-icon>mdi-delete-forever-outline</v-icon>
          </v-btn>
</v-card>
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum