tips for utilizing namespaced getter filtering within a Vuex module in vueJs

In my custom module named ShopItemCategory, I have a Getter

    getters: {
        shopItemsCategories: state => state.ShopItemsCategories.data,
    },

Inside the component, there is a computed function I defined

  computed: {
    shopItemsCategories() {
      return this.$store.getters['ShopItemCategory/shopItemsCategories'].filter(c => c.shop_id == this.$route.params.id)
    },
    },

Although the filter works fine when I click save, it throws an error upon refreshing

Vue warn]: Error in render: "TypeError: Cannot read property 'filter' of undefined"

The mutation that is dispatched in mounted is as follows

    mutations: {
        SET_SHOP_ITEM_CATEGORIES(state, shopItemsCategories) {
            state.ShopItemsCategories = shopItemsCategories;
        },
        }

And in the mounted() method of the component, I dispatch a command

  mounted() {
    this.$store.dispatch('ShopItemCategory/getShopItemsCategories');
  },

Answer №1

When your SET_SHOP_ITEM_CATEGORIES mutation is not yet executed, the getter will utilize the initial data present in your module's state. If the property ShopItemsCategories.data is undefined, an error message will be triggered when the computed property runs.

A simple way to resolve this is by defining an initial state that aligns with the requirements of your application.

For instance

state: {
  ShopItemsCategories: {
    data: []
  }
}

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

How can I adjust the time in a range slider using AngularJS?

Currently, I am utilizing a Slider with draggable range in angular js for time selection. The Slider can be found here: https://jsfiddle.net/ValentinH/954eve2L/. I aim to configure the time on this slider to span from 00.00 to 24.00, with a 10-minute inter ...

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

I am facing an issue with an array that includes displayName with HTML tags: this.topicsList = [ {id: "173", name: "Discussion1", displayName: "Discussion1", status: 1}, {id: "174", name: "discussion123", displayName: "discussion123", status: 1}, {id: "19 ...

How can I customize the visibility toggles for the password input field in Angular Material?

Currently immersed in the Angular 15 migration process... Today, I encountered an issue with a password input that displays two eyes the first time something is entered in the field. The HTML code for this is as follows: <mat-form-field appearance=&qu ...

Issue encountered when setting a background image in Angular

When trying to add a background image and set it to cover the entire browser window, I encountered an issue where the image appeared very small and did not fully cover the background. As someone new to Angular, my understanding of how this process works i ...

What is the best way to display the remaining items in an array when a user clicks the next button?

Having a total of 12 cameras, I want to be able to select 4 cameras from a drop-down menu option and have only those 4 cameras displayed. Then, when I click on the next button, I need to show the remaining cameras in the selected layout format. How can thi ...

Enhance Vuetify functionality using TypeScript for custom components

I'm facing a challenge with extending a Vuetify component and setting default props in TypeScript. While I had success doing this in JavaScript, I am struggling to do the same in TS. Below is an example of how the Component was implemented in JS: imp ...

Display a hidden div on hover using JQUERY

How can I make a hover popup appear when submitting a form, and have it disappear only when the mouse is out of both the popup div and the submit button? Currently, the hover popup shows up but disappears when entering the popup. Can someone assist me in r ...

Do I need to include a callback in my AWS Lambda handler function?

What is the function of the callback in the lambda handler? It appears to be utilizing the sns variable and I am looking to make some modifications to the variables. exports.handler = function(event, context, callback) { console.log("AWS lambda and ...

The initial io.emit message seems to always be delayed or lost in transmission

io.on('connection',function(socket){ console.log('connected'); socket.on('disconnect',()=>{ console.log('a user disconnected'); }); socket.on('sendMessage',function(data){ const message = data.te ...

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

Having trouble with clearTimeout and clearInterval functions not functioning properly?

Currently, I've set up a countdown using both setInterval and setTimeout functionalities, and it seems to be running smoothly. However, I encounter an issue when trying to stop the countdown upon clicking a certain button; it pauses only after complet ...

The JavaScript function Date().timeIntervalSince1970 allows you to retrieve the time

For my React Native app, I currently set the date like this: new Date().getTime() For my Swift App, I use: Date().timeIntervalSince1970 Is there a JavaScript equivalent to Date().timeIntervalSince1970, or vice versa (as the data is stored in Firebase clo ...

Nested within an it block are Protractor Jasmine describe blocks

Initially, the code provided below appears to be functioning properly. However, I have not come across anyone using this method before, leading me to question its validity and potential unforeseen drawbacks. The scenario involves writing an end-to-end tes ...

Modify the appearance of a Javascript file that is parsing data from a text file

I am working on an HTML project where I have a JavaScript file that reads from a text file. Currently, the text from the file is displaying in my HTML file, but I would like to style it using CSS. Can anyone provide guidance on how to achieve this? I am st ...

Dynamically select checkbox groups based on items already listed in a textarea

Hello! Would you be able to review this example and provide guidance on how I can use jQuery to dynamically select the checkboxes that have the same text as in the textarea below? <br /> <br /> Default Items From Database <br /> < ...

What is the method for configuring body attributes in CSS with AngularJS?

Setting the background image of a page using CSS: body { background: url(http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-backg ...

Angular Headers API Development

https://i.sstatic.net/zQzAC.jpg I've been attempting to include the X-APIKeys headers in every api call, but I'm only finding examples in curl. Here's what I've tried: var accessKey = "gdgfdgdfgdgdgfdgdfgfdgfdgdgh"; var sec ...

Obtain JSON data through an HTTP POST call

Here is a function that I have, which was mainly borrowed from the solution to another problem on SO: function sendPostRequest(url, data) { request( { url: url, method: "POST", json: true, body: data }, function(error, response, body) ...

`an error occurs when trying to loop through an object and add a key``

I'm currently facing an issue with adding a key to an object through looping. Here is the code snippet: function checkResult(want, reference) { const keys = Object.keys(reference); for(let i=0; i<Object.keys(reference).length; i++){ console ...

"Displaying the y-axis in d3.js: A Step-by-Step

I am a beginner in d3.js and I'm having trouble with my y-axis not showing up in the browser. Can someone please help me find a solution? var barOffset=5; var barWidth=50; var width=700,height=700; function processData(data,key){ var objects=[]; ...