The Vue component's data function is currently devoid of content

Question

The Vue component's data function is currently devoid of content

I've defined a Vue.js component as shown below:

module.exports = Vue.component('folder-preview', {
    props: ['name', 'path', 'children', 'open'],
    template: `...
    `,
    methods: mapActions([
    ]),
    computed: mapState([
    ]),
    data: ()=> {
        console.log(this);
        return {
            collapsed: (this.open !== 'true')
        }
    }
});

Essentially, my goal is to maintain collapsed as a local data property within the component while using the value passed in the prop as the initial value. However, it seems like this.open is always undefined. When I console.log this, it displays an empty object, leaving me puzzled as to why this might be happening.

Could I be misunderstanding something here?

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

The issue in your code is quite subtle: you have defined 'data' as an arrow function.

As discussed in this particular question, arrow functions fetch `this` from the context of declaration, whereas regular functions fetch `this` from the calling context. By defining 'data' as an arrow function, it won't properly access the component's scope.

When defined as a regular function that doesn't isolate `this`, the component functions correctly.

Vue.component('sample', {
  props: ['open'],
  template: '<div>{{collapsed}}</div>',
  data() {
    return {
      collapsed: this.open !== 'true'
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <sample open="true"></sample>
</div>

Answer 2

The issue in your code is quite subtle: you have defined 'data' as an arrow function.

As discussed in this particular question, arrow functions fetch `this` from the context of declaration, whereas regular functions fetch `this` from the calling context. By defining 'data' as an arrow function, it won't properly access the component's scope.

When defined as a regular function that doesn't isolate `this`, the component functions correctly.

Vue.component('sample', {
  props: ['open'],
  template: '<div>{{collapsed}}</div>',
  data() {
    return {
      collapsed: this.open !== 'true'
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <sample open="true"></sample>
</div>

The Vue component's data function is currently devoid of content

Answer №1

Similar questions

Getting user information from VueJS using Axios is a common task that many developers need to tackle

Tips for incorporating a favicon in a React application

Experiencing difficulties with certain npm CLI modules when using it as a task runner and build tool

Implementing a password toggle feature on a form that extends Django's default Authentication Form

What are some effective ways to optimize a scrolling script?

How to Merge Items within an Array of Objects Using Typescript?

finding the node version in a code repository

The flat function for JavaScript Arrays is not defined in React Native

The absence of CORS headers detected in XMLHttpRequest

What is the method, by using JavaScript or CSS, to include extra space at the end of text block without starting a new line?

Interactive Bar chart updates in real-time with Highcharts and AngularJs

I am looking to retrieve a specific input value from a JSON array using JavaScript

Instructions for saving a binary file on the client using jQuery's .post function

Mapping JSON data from Mongoose to Vue and Quasar: A comprehensive guide

What could be causing my v-select to be rendered multiple times?

The timer functionality in the Angular 2+ component is malfunctioning

Using a package with `webfontloader` in NextJs for Server-Side Rendering: A guide

What is the best way to extract and retrieve the most recent data from an XmlHttpRequest?

Vue: The async Apollo mixin function successfully logs a value, however it ultimately returns as undefined

What is the easiest way to identify the currently rendered Vue component in a web browser?