Sending property value to computed properties within a component

Question

Sending property value to computed properties within a component

Is it considered a best practice to utilize a prop value within a computed property function of a component? If so, how can I construct the return statement using this prop?

Carousel.vue

props: [
  'source',
],
computed: {
   items () {
     return this.$store.state.(prop value source here).list
   }
}

store/categorya.js (the same for categoryb and categoryc)

import categorya from '(...)'
export const state = () => ({
  list: categorya
})

Update

Index.vue

carousel(source="categorya")
carousel(source="categoryb")
carousel(source="categoryc")

javascript vue.js vuejs2 vuex vuex-modules

Answer 1

Answer №1

This answer provides a solution for accessing data from Vuex state. If the source indicates a module name in Vuex, bracket notation can be used:

computed: {
  items () {
    return this.$store.state[this.source].list
  }
}

AFTER EDITING

Even after editing, the question remains somewhat unclear. However, if there are no modules and list is directly under the root state, you can simply use:

computed: {
  items () {
    return this.$store.state.list
  }
}

Regardless of how list is initially defined by an import named categorya, the key thing to remember is that it's still the only available state property with the name list.

Answer 2

This answer provides a solution for accessing data from Vuex state. If the source indicates a module name in Vuex, bracket notation can be used:

computed: {
  items () {
    return this.$store.state[this.source].list
  }
}

AFTER EDITING

Even after editing, the question remains somewhat unclear. However, if there are no modules and list is directly under the root state, you can simply use:

computed: {
  items () {
    return this.$store.state.list
  }
}

Regardless of how list is initially defined by an import named categorya, the key thing to remember is that it's still the only available state property with the name list.

Sending property value to computed properties within a component

Answer №1

AFTER EDITING

Similar questions

Working with AngularJS $resource: including an array element in paramDefaults

What is the best way to make a request to the deployed API on Vercel?

Explore the properties within an array of objects through iteration

Exploring Vue 3 and Pinia: Achieving Reactivity in Stored Values

Items seem to vanish into thin air and become immovable when attempting to relocate them

JS Implementing a real-time reactive data dynamic bar chart graph in Vue3

Prevent the resizing of my website on iOS devices using HTML and CSS

Utilize jQuery and JavaScript dynamically in an HTML document on iOS devices

Having trouble displaying the output on my console using Node.js

Tips for obtaining the combined outcome of multiple arrays (3 to 5 arrays) in JavaScript

Identifying the initial object with a duplicate property within an array of objects using JavaScript

Question about sending multiple Axios POST requests with parameters

Issue with Bootstrap Modal Tabs not functioning

What causes the data to flicker between the old and new values when the state is updated in ReactJS?

Enveloping an immediate search within a JavaScript throttle function

It seems that JavaScript is unable to detect newly added elements following an AJAX request

How can I deactivate a Material UI button after it has been clicked once?

Issues with $routeProvider in a web page hosted by Express.js

Several radial progress charts in JavaScript

Troubleshooting issues with Ajax and Jena