Have Vue props been set to null?

Question

Have Vue props been set to null?

Currently, I have a component within my vue.js application that looks like this:

export default {
    props: ['forums'],

    methods: {
        increment(forum, index) {
            ForumService.increment(forum)
                .then(() => {
                    this.forums.splice(index -1, 2, this.forums[index], this.forums[index -1]);
                });
        },
    }
}

However, when attempting to increment using:

<i class="material-icons" @click="increment(forum)">&#xE316;</i>

The prop forums ends up becoming null (which is visible in the vue devtools). Is there a solution to resolve this issue?

javascript vue.js

Answer 1

Answer №1

To ensure proper functionality, it is important to create a local copy of your prop within the created hook. By doing so, you can then utilize this local variable instead:

export default {
 props: ['forums'],
  created() {
    this.localForums = this.forums;  // Copy prop to local variable
  },
  methods: {
    increment(forum, index) {
      ForumService.increment(forum)
        .then(() => {
          this.localForums.splice(index - 1, 2, this.localForums[index], this.localForums[index - 1]);
        });
    },
  },
  data() {
    return {
      localForums: []
    }
  }
}

You can now proceed to invoke your method in the following manner:

<i class="material-icons" @click="increment(forum, 1)">&#xE316;</i>

A visual demonstration of how this operates has been established via a JSFiddle. Please note that the specific details of ForumService.increment(forum) and forum are unknown, hence a mock scenario has been presented with a returned promise to illustrate the absence of any scope-related complications:

https://jsfiddle.net/wu6ad78m/

Answer 2

To ensure proper functionality, it is important to create a local copy of your prop within the created hook. By doing so, you can then utilize this local variable instead:

export default {
 props: ['forums'],
  created() {
    this.localForums = this.forums;  // Copy prop to local variable
  },
  methods: {
    increment(forum, index) {
      ForumService.increment(forum)
        .then(() => {
          this.localForums.splice(index - 1, 2, this.localForums[index], this.localForums[index - 1]);
        });
    },
  },
  data() {
    return {
      localForums: []
    }
  }
}

You can now proceed to invoke your method in the following manner:

<i class="material-icons" @click="increment(forum, 1)">&#xE316;</i>

A visual demonstration of how this operates has been established via a JSFiddle. Please note that the specific details of ForumService.increment(forum) and forum are unknown, hence a mock scenario has been presented with a returned promise to illustrate the absence of any scope-related complications:

https://jsfiddle.net/wu6ad78m/

Have Vue props been set to null?

Answer №1

Similar questions

Maintain the previous state in AngularJS using ui-router

Creating a custom login directive in Angular 2 and utilizing location.createComponent for dynamic

Using Twig path to pass Ajax URL parameter

Storing/Caching API Requests with NUXT.JS

A Step-by-Step Guide to Launching PDF Blob from AJAX Response in a Fresh Chrome Tab

Is there a way to retrieve the value of elements that are deeply nested within multiple objects and arrays?

What is the proper method for delivering Javascript code with rendered HTTP to a client?

Submitting form by clicking a link on the page

Tips for leveraging a button to trigger server-side actions

Send information using AJAX's POST method

Looping through a set of API calls using JavaScript Web API

Steps for populating an ng-table with data retrieved from a REST web service that returns a JSON format

Preserving the button's state when clicked

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

What are the steps to get an Icon to intersect with a v-app-component in a Vuetify project?

Guide on accessing nested objects in EJS templates

When implementing 'useGlobalGuards' in NestJS, remember to exclude endpoints for enhanced security

Guidelines for queuing method calls using Vue.js

How can I use jQuery to access the parent node in an XML document?

Load information from several folders into a dropdown menu, dynamically updating the options based on the selected folder using AJAX and JSP