CODEWITHSUNDEEP
vue.jsnuxt.js
Jack Richard
Jack Richard

Reputation: 48

Nuxt - Cannot access data inside a method

I'm using CKEditor 5 + CKFinder (Modal Mode) to select an image using the @click event. The problem is that I don't have access to data inside the onInit function. Here is the method:

data() {
    return {
        post: {
            thumbnail: null,
        },
    };
},
methods: {
    openModal() {
        console.log(this.post.thumbnail) // NO PROBLEM! this.post.thumbnail IS ACCESSIBLE
        CKFinder.modal( {
            chooseFiles: true,
            width: 800,
            height: 600,
            onInit: function( finder ) {
                finder.on( 'files:choose', function( evt ) {
                    var file = evt.data.files.first();
                    this.post.thumbnail = file.getUrl(); // PROBLEM !! $this.post is undefined
                } );
            }
        } );
    },
},

And this is my Template:

<div class="btn btn-danger" @click="openModal">Choose Image</div>
<img class="mx-auto d-block" :src="post.thumbnail" />

Upvotes: 1

Views: 1292

Answers (1)

Denis Tsoi
Denis Tsoi

Reputation: 10404

As mentioned in the comment, you need to use an arrow function to resolve this in the vue object.

Whenever you use function () {}, this refers to the properties of the function, not the Vue object that you intend to reference

// example
methods () {
  openModal() {
    onInit: function () {
      this.post // 'this' is the onInit function, not the Vue object
    }
  }
}

// solution
methods () {
  openModal() {
    onInit: () => {
      this.post // 'this' is the Vue object
    }
  }
}

Answer

data() {
  return {
    post: {
        thumbnail: null,
    },
  };
},
methods: {
  openModal() {
    console.log(this.post.thumbnail) // NO PROBLEM! this.post.thumbnail IS ACCESSIBLE
    CKFinder.modal( {
      chooseFiles: true,
      width: 800,
      height: 600,
      onInit: finder => {
        finder.on( 'files:choose', evt  => {
          var file = evt.data.files.first();
          this.post.thumbnail = file.getUrl(); // PROBLEM !! $this.post is undefined
        });
      }
    });
  },
},

Upvotes: 2

Related Questions