Unable to display data from vuex getters in the story

My MongoDB database contains:

user:{
     matchesList:[{
     kdList:String,
     winsMatchesList:String
     }]

After creating a Vuex.Store with some getters, I have:

      matchesList:  state => state.matchesList,

        matchesListKD:  state => {
            let matchesList = []
            for (let g of state.matchesList) matchesList.push(g.kdList)
            return matchesList
        }

Using this code in the component works properly:

apollo:{
    kd: {
    query: GETMATCHESLIST,
      update(data){
        console.log("data", this.$store.getters.user.matchesList)

      }}
  }

However, the following code displays undefined:

apollo:{
    kd: {
    query: GETMATCHESLIST,
      update(data){
        console.log("data", this.$store.getters.user.matchesListKD)

      }}
  }

Answer №1

Check this out:

matchesList:  state => state.matchesList,

matchesListKD:  state => {
    let matchesList = []
    for (let g of state.matchesList) matchesList.push(g.kdList)
    return matchesList
}

You are currently utilizing state.matchesList as the state, but note that matchesList is actually part of the getters, not a part of the actual state.

If you intend to use state.matchesList directly as part of your state, then you would need to move it into the state object. However, in doing so, you wouldn't be able to access it using

this.$store.getters.user.matchesList
.

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

What are the steps to implement scoped styles in Vue using Sass?

When I try to apply scoped styles, the code stops working. It works fine without using the scoped attribute. <v-dialog persistent content-class="myclass"> <style lang="sass"> .myclass max-width:380px But once I add s ...

Display an icon button when a user edits the text in a text field, and make it disappear once clicked on

Figuring out how to incorporate a v-text-area with an added button (icon) that only appears when the text within the text area is edited, and disappears once it is clicked on, has proven to be quite challenging. Below is a simplified version of my code to ...

I'm currently leveraging Vue.js and Python Flask for my backend development. I'm looking to establish some local variables. What is the best way to accomplish this?

Here is my Vue js file where I am utilizing two URLs from localhost. My goal is to create a configuration file that will allow me to make changes in one place and have those changes reflected throughout. <template> <div> <div class="glob ...

"Implementing Vue mousemove functionality only when the mouse button is pressed

Is it possible to initiate a mouse movement only after the element has been clicked first? I am exploring this functionality for an audio player timeline. .player__time--bar(@mousedown="setNewCurrentPosition($event)") .slider(role="slider" aria-valuem ...

In Vue3, automatically infer a type for a slotProp based on the modelValue

In simplifying the component I aim to create, I have created the following code structure: // MyComp.vue <script setup lang="ts"> import { PropType, defineProps, defineEmits } from 'vue'; const props = defineProps({ modelVal ...

The 'default' export is not found in the 'tailwind.config.js' file

Is it possible to utilize a theme variable for Tailwind within the Nuxt code for Storybook? Although everything appears to be fine during development, I encounter an error when building Storybook stating that ""default" is not exported by "t ...

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

I've been stuck on this issue for quite some time now. I've created a table with 3 columns, and for the first two columns, I can easily display the contents of each row using the prop property. However, for the third column, I need to display inf ...

Guide on removing a row from el-table using Vue.js

Below is the code for my el-table: <div class="row"> <div class="col-sm-12"> <el-table :data="membersList"> <el-table-column label="Name" prop="member_name" align="cent ...

Is it possible for Vue Router-Link to refresh the current route with a new key or data in a standardized way?

Note that I am not looking for a workaround, as another question on the topic did not provide a solution that worked for me. I have implemented my own workaround by refreshing the Vuex store's data that the route depends on, which seems to be the most ...

What could be the source of the error message: "Error: .eslintrc.js: The environment key 'vue/setup-compiler-macros' is not recognized

I am currently working on a sample application using Vue 3 and Typescript. Specifically, I have opted for the new Vue v3.2 setup option within the section of the Vue SFC. Following the guidance from the Vue documentation, I included "vue/setup-compiler-ma ...

What is the process for accessing getBoundingClientRect within the Vue Composition API?

While I understand that in Vue we can access template refs to use getBoundingClientRect() with the options API like this: const rect = this.$refs.image.$el.getBoundingClientRect(); I am now attempting to achieve the same using template refs within the com ...

How to attach a Vue.js component to the root of an application

I've built a modal.vue component like this: <template> <transition name="modal-transition"> <div class="modal-body" v-if="displayed"> <div class="modal-overlay" @click="displayed = false"& ...

What is the best way to monitor changes in a property saved in Vuex(store) and trigger a specific method based on its value?

Is there a way to dynamically change links based on the user_role variable stored in Vuex? I need suggestions on how to track the changes and perform specific methods depending on its value. ------------------------------store.js----------------------- ...

Display a modal when a user is not authorized in vue-router

After stumbling upon this post on Medium, I decided to implement its concepts into my project. My goal was to verify a user's authorization to access a particular route, and if unauthorized, display a modal pop-up. In order to achieve this, I made s ...

Tips for efficiently loading data into a vuex module only when it is required and addressing issues with async/await functionality

Is there a method to load all the data for a Vuex store once and only load it when necessary? I believe there is, but I am having trouble implementing it. I'm not sure if it's due to my misunderstanding of Vuex or Async/Await in Javascript promi ...

Troubleshooting parameter issues with Vue Router on page refresh

Why does the parameter work when I'm directed from a `router-link' to a component, but then not work when I refresh the page? Let me explain: routes.js has the following paths: { path: '/myspaces', name: 'myspaces', ...

Discovering Vue: Utilizing variables to bind to array keys within components

Is there a way to use variable array keys for bindings in a custom component? For example, how can I make the title 'Title 1 for default settings' if componenttype is set to 'default', and 'Title 1 for guest settings' if compo ...

Interactive v-card featuring a designated region that is not part of the v-menu

Currently utilizing Vuetify's v-card, I am looking to add click functionality by using the "to" property. Although it works well, there is an issue when incorporating a menu on the top-right side of the card. Clicking on the menu counts as clicking on ...

Tips on building a carousel with slot elements

Many people have shown me the traditional way of creating a carousel using an array of images. However, I find this method to be limiting because I want each slide of my carousel to include a lightbox component. Instead of having to rewrite the lightbox fu ...

Enhance User Experience: Implement Asynchronous Loading of Vue Components in Laravel 5.6 using laravel-mix and webpack

Laravel 5.6.21 NPM 6.1.0 Node 10.5.0 Webpack 3.12.0 Seeking guidance on how to correctly set up laravel-mix, webpack, and babel to enable lazy-loading of vue components using the technique outlined in Lazy Loading Routes. In particular, implementing stag ...