Variable set in fetch() becomes empty in method() NuxtJS

Question

I have a simple NuxtJS page. My part of code:

<template>
  <div>
    <button @click="btnClick">
      Click
    </button>
  </div>
</template>

<script>
export default {
  name: 'TestPage',
  data () {
    return {
      testArray: []
    }
  },
  fetch () {
    // eslint-disable-next-line dot-notation
    this.testArray['key'] = '123321'
    console.log('Log1========================')
    console.log(this.testArray)
    console.log('====================================')
  },
  methods: {
    btnClick () {
      console.log('Log2========================')
      console.log(this.testArray)
      console.log('====================================')
    }
  }
}
</script>

So, when I am loading this page or reload page, I have got in Console:

[Log] Log1========================
[Log] [ key: '123321' ]
[Log] ====================================

but when I click on a button, array is empty:

[Log] Log2========================
[Log] [] (0)
[Log] ====================================

I am using Nuxt 2.15.8. I can't understand, what's problem can be, because if my memory serves me right, I have done the same things many times, and there was no problems with this.

pzutils · Accepted Answer · 2022-09-08 06:41:13Z

1

You're actually defining testArray as an object at your line this.testArray['key'] = '123321' you can either change your definition of testArray to an object testArray: {} or add '123321' to your array with testArray.push('123321')

answered Sep 8, 2022 at 6:41

pzutils

5305 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Variable set in fetch() becomes empty in method() NuxtJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related