Vuex failing to return object

I'm a newcomer to Vuex and I am facing issues while using a variable as a parameter to fetch card information from state.cards.

store.js:

export default new Vuex.Store({
    state: {
        cards: []
    },
    getters: {
        getCard(state) {
            return id => state.cards.find(card => id === card.id);
        }
    }
});

card.vue:

computed: {
    card() {
        var id = this.$store.getters.getCard(this.$route.params.card);
        console.log(id);  // shows 88
        console.log(this.$store.getters.getCard(88));  // returns card details
        console.log(this.$store.getters.getCard(id));  // returns undefined
        return populateCard(
            this.$store.getters.getCard(id)
        );
    }    
}

As seen in the code snippet above, the getter function successfully retrieves data when the literal value 88 is passed, but encounters an issue when a variable id set to 88 is used as the parameter. I am puzzled by this behavior and unable to identify the problem.

Answer №1

After a thorough investigation, it was determined that greendemiurge had indeed provided the correct solution. The problem stemmed from the router returning a string, which was remedied by using the parseInt() method to convert the id to an integer.

computed: {
            card() {
                var id = this.$route.params.card;
                return populateCard(
                    this.$store.getters.getCard(parseInt(id, 10))
                );
            }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Ionic with Angular is facing an issue where ion-radio element cannot be set as checked by default

Having trouble selecting a radio button in a radio list. Can anyone help? Any assistance would be greatly appreciated. This is how I've been attempting it: <div class="list"> <ion-radio ng-repeat="item in goalTypeList" ...

Troubleshooting issues with hint functionality and fullscreen mode in CodeMirror within a jQuery layout

I have integrated the codeMirror library into the UI Layout Plug-in on my website. Challenges: When using CodeMirror within the layout, the Full Screen Editing feature does not work as intended. Press F-11 to zoom in and Esc to exit full screen mode. I ...

What could be causing the malfunction of this JavaScript dropdown select feature in Internet Explorer?

I created a website that requires users to input their location, including the city and state. The process involves two dropdown menus: - The first dropdown menu, labeled "state," loads all USA states as selectable options when the website is loaded. This ...

A stylish method for converting CSV data into XML format using Node.js and Express

I am in search of a sophisticated solution to convert CSV files into hierarchical XML format based on a specific template within a Node/Express server. For example, if the CSV is of Type Template "Location": Name,Lat,Lon,Timezone name,lat,lon,timezone it ...

Exploring location-based services using React-Redux

Seeking a deeper comprehension of redux and the react lifecycle methods. The issue I am facing involves a prop function within the componentDidMount that calls another function in redux. Within redux, I attempt to retrieve location data to set as the init ...

Generate table rows by automatically summing the rows and column data using a loop

I'm currently working on a form that dynamically adds data to columns and rows. While I've successfully generated the column names based on database data and used a loop to add details, adding rows has proved to be quite challenging :) Is ther ...

Issue: Having trouble making the frontend work properly due to difficulty in accessing the 'state' property which is undefined

Encountering an issue while attempting to input data from a web application into the database. Having trouble understanding the root cause of the problem. The error occurs when the database insert button is triggered. The following snippets of code showcas ...

The Angular Material Datepicker lacks any selected date

I am currently in the process of developing a web application using Angular and incorporating Angular Material for certain UI components. I have encountered an issue that I am unable to resolve. When attempting to use the datepicker as outlined on https:// ...

Adjust the dimensions of an element using Protractor

When using the getSize method, I am able to determine the size of an element but I am struggling to understand how to change its height. To provide some additional context, my goal is to verify if a user can resize a textarea element. Should I simply adju ...

Clicking the button will cause the React component to close itself automatically

Is there a way to make a React component self-close when a button within the component is clicked? Take a look at this code snippet: import React from 'react'; import PropTypes from 'prop-types'; const MyReactComponent = (props) => ...

Using the axios response to assign data object in VueJS

When making an API call, I am receiving an expected error. While I am able to log the error message in the console, I am encountering issues trying to set a vuejs data variable with the response. Can anyone point out what I might be doing incorrectly? ...

Having trouble publishing project on Vercel because of a naming issue

Whenever I try to deploy a project on vercel, I encounter an error stating that the project name is not valid. The specific error messages are as follows: Error: The name of a Project can only contain up to 100 alphanumeric lowercase characters and hyphe ...

What is the process of assigning a string from an external PHP file to a JavaScript variable?

Recently, I've been experimenting with reading data from an external PHP file using Ajax. My goal is to store this data in a Javascript variable, but I'm unsure if my current approach is correct. Should I define the variable within the Ajax brack ...

Instructions for creating a dynamic Google map based on an address

Specifics I am aiming to generate a map based on any address stored within my <span> The address in question is : 410 walker street Lowell MA 01851 The <span> containing the address reads as follows: Address: <span id="address" > 410 w ...

I struggle to grasp the significance of the scene's positioning

I've been experimenting with some sample code using three.js, where I've created a plane and I want it to rotate around. Here's a snippet of my code: This is the setup for my camera: var camera = new THREE.PerspectiveCamera(70, window.inner ...

Moving ThreeJS model during animation (Retrieving model's position without callback function)

I'm in the process of creating a model that showcases the International Space Station orbiting around the Earth using threeJS. Everything is working perfectly except for updating the position of the ISS model. Currently, I have a sphere that orbits th ...

ReactJS - Element not specified

I'm experiencing a specific issue with the component below related to the changeColor() function, which is triggering an error message: TypeError: Cannot set property 'color' of undefined This error seems to be isolated within this compo ...

Decoding a barcode using JavaScript

Currently, I am facing an issue with my barcode gun scanner. It reads barcodes into input fields but returns each digit separately instead of as a whole string. This has been quite bothersome for me. For instance, when I scan the barcode of a bottle of wa ...

Issues arise when trying to use the Jquery append() method in conjunction with Angular

We are currently utilizing jquery version 1.9.1 and angular version 1.2.13 for our project. Our wysiwyg editor is functioning well, as we are able to save HTML into the database and load it back using the jquery append function successfully. However, we ar ...

Is there a way to retrieve values from TextFields and Select elements by simply clicking on a button?

I am currently working on a project using react, redux, and material ui. I need to retrieve data from a TextField in order to make an order. The code snippet below showcases my current implementation: <Select value={product.color_set[0].title}> { ...