Ways to access states from a Vuex store within a Vuetify list in VueJs

Here is a snippet from my Vue file:

import store from '@/store'
export default{
    name: 'myList',
    data: () => ({
        show: true,
        listContent: [{
                name: '1',
                icon: 'person',
                value: function () {
                    return store.state.myStore.settings.one
                }
            }, {
                name: '2',
                icon: 'person',
                value: function () {
                    return store.state.myStore.settings.two
                }
            }, {
                name: '3',
                icon: 'person',
                value: function () {
                    return store.state.myStore.settings.three
                }
            }
        ]
    })
}

The issue lies in fetching the 'value' from the 'listContent' array.

 {
    name: '3',
    icon: 'person',
    value: function () {
        return store.state.myStore.settings.three
    }
 }

In my implementation, I assumed I could access the view by using :

this.$store.state.myStore.settings.one

However, 'this' inside the value function refers to the object 

{
    name: '3',
    icon: 'person',
    value: function () {
        return store.state.myStore.settings.three
    }
}

Despite this, the code continues to malfunction. I aim to retrieve the store within listContent.

The list, presented in the following manner :

<v-data-table :items="listContent" hide-actions hide-headers>
    <template slot="items" slot-scope="props">    
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right" v-text="props.item.value()">  </td>
    </template>
</v-data-table>

I may have erred in referencing the store or incorrectly structured the template. Thoughts?

javascriptvue.jsvuexvuetify.js

Answer №1

Why is it necessary for the value to be a function that returns the state value? You can simply assign it directly to state using 

this.$store.state.myStore.settings.one

To make this work, change the data option to a regular function instead of an arrow function so that this continues to represent the vue instance

export default {
  name: "myList",
  data() {
    return {
      show: true,
      listContent: [
        {
          name: "1",
          icon: "person",
          value: this.$store.state.myStore.settings.one
        },
        {
          name: "2",
          icon: "person",
          value: this.$store.state.myStore.settings.two
        },
        {
          name: "3",
          icon: "person",
          value: this.$store.state.myStore.settings.three
        }
      ]
    };
  }
};

Answer №2

Perhaps this solution could be of assistance. It is quite lengthy, but it does the job.

const myData = {
  state: {
    test: "module",
    settings: {
      one: "This is one",
      two: "This is two",
      three: "This is three"
    }
  }
};

const storage = new Vuex.Storage({
  modules: { myData }
});

new Framework({
  el: "#app",
  storage,
  Data() {
    return {
      listItems: [
        {
          name: "1",
          icon: "person",
          dataValue: null
        },
        {
          name: "2",
          icon: "person",
          dataValue: null
        },
        {
          name: "3",
          icon: "person",
          dataValue: null
        }
      ]
    };
  },
  Update:{
    '$storage.state.myData.settings.one':{
        immediate:true,
      handler:function(val){
            this.listItems[0].dataValue = val;
      }
    },
    '$storage.state.myData.settings.two':{
        immediate:true,
      handler:function(val){
            this.listItems[1].dataValue = val;
      }
    },
    '$storage.state.myData.settings.three':{
        immediate:true,
      handler:function(val){
            this.listItems[2].dataValue = val;
      }
    },
  }
});

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

Using ESLint to enforce snake_case naming conventions within TypeScript Type properties

When working with TypeScript, I prefer to use snake_case for properties within my Interfaces or Types. To enforce this rule, I have configured the ESLint rule camelcase as follows: 'camelcase': ["error", {properties: "never"}], Even though the E ...

javascripttypescripteslinttslinttypescript-eslint

The code function appears to be malfunctioning within the Cordova platform

When working with Cordova, I encountered an issue where I needed to trigger a button event from a listener. In my app, I am loading a specific page . This page contains a button with the class name "btn", and I wanted to display an alert when that button i ...

javascriptjqueryasp.netcordovaphonegap

Add the search outcome to the input field in vue

Within this section, I have implemented an @click event <h2 @click="action(customer.id)">{{ customer.name }}</h2> My goal is to append the clicked result to the input when any result is clicked. Do you have any ideas on how to achieve this? ...

vue.jsvuejs2

Should property paths be shortened by utilizing new variables for better organization?

Yesterday, someone asked me why I would introduce a variable to shorten the property path. My answer was simply that it feels easier to read. Now I am curious if there are any objective reasons to choose between the two options listed below (such as memory ...

javascriptnode.js

Display solely the API information that falls under the category_name of "WEBSITE" using Vue

My data is fetched from an API using the following code: async mounted() { const { data } = await axios.get('/api/talent', { headers: { 'X-AUTH-TOKEN': '####', 'Content-Type': 'application/jso ...

vue.jsfilteraxiosnuxt.js

What is causing this substring to not function properly in Chinese text?

What could be causing this issue with the substring function when dealing with Chinese text? I have successfully used it for other languages, but when working with Chinese characters, I am getting an empty string as a result. countryID = "奥地利 ...

javascriptjquerysubstringchinese-locale

Add the Selected Value to the Title

Is there a way to dynamically add the selected value from each select element to its corresponding heading without requiring user interaction? I need this to happen as soon as the page loads. Here is an example in a jsfiddle https://jsfiddle.net/dqfvyvdt/2 ...

javascriptjquery

Is it necessary to deactivate CORS in the Spring backend? Unauthorized requests are being prevented from accessing the system

Currently, I am undertaking a project using spring boot and Vue where I need to secure my endpoints based on user roles - admin or typical users. However, most of the tutorials I come across for configuring JWT and spring security seem to recommend disab ...

spring-bootvue.jscorsjwtaxios

What is the best way to place two stacked buttons side by side in an inline format?

I am trying to rearrange the layout of a bootstrap modal that includes two multiple select elements and two buttons. My goal is to have all controls inline, with the buttons stacked on top of each other. Here's an example of what I'm aiming for: ...

javascripthtmltwitter-bootstrap

When working with Bootstrap-Vue, what is the best way to stop a b-dropdown from closing when a nested b-input component is clicked on?

I'm struggling to grasp the concept of Vue's Event Modifiers. The documentation suggests that adding this simple code should do the trick: <!-- the click event's propagation will be stopped --> <a v-on:click.stop="doThis"& ...

javascriptvue.jsvuejs2pugbootstrap-vue

"Utilizing Vue.js to determine whether a checkbox is filled with data or left

My goal is to create a checkbox using vue js without writing a method. I want the checkbox to default to false, and when checked, I want the data "opening_balance" to be an empty array. Conversely, if the checkbox is unchecked, I want it to be omitted when ...

javascriptvue.jscheckboxvuejs2

Can you explain the significance of the visitFunction error message?

When running [email protected] + [email protected] + [email protected] + [email protected], I encountered an error message. Can anyone help me understand what this error means? I am simply executing: res.render(view, response); Proper ...

javascriptnode.jsexpresspug

I'm encountering an issue with automatically updating content on a webpage

I am currently working on a webpage that refreshes its content automatically to display the most up-to-date data from the database. Here's the JavaScript code I'm using: setInterval(function() { $("#status").load('refresh.php'); }, ...

javascriptphpajaxdatabase

Utilizing an Angular Service within a method, embedded in a class, nested inside a module

module Helper { export class ListController { static handleBatchDelete(data) { // Implementing $http functionality within Angular ... $http.post(data) } } } // Trigger on button click Helper.ListController. ...

javascriptangularjstypescriptangularjs-service

Troubleshooting Vercel and Express DELETE request cross-origin resource sharing problem

Currently, I am in the process of developing an API using Vercel and ExpressJS. The GET and POST endpoints are functioning properly, however, I encountered an issue with the DELETE endpoint. When attempting to access the endpoint from my client-side JavaSc ...

javascriptnode.jsexpresscorsvercel

What is the best way to create a mirrored effect for either a card or text using CSS

Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...

javascripthtmlcss

Error: It seems like Material UI has updated their export structure and now `makeStyles` is no longer available in the

The export of makeStyles from @mui/material/styles has been deprecated. Despite importing from @mui/styles throughout my project, this error continues to appear. I have already tried removing the node_modules folder and reinstalled, but the issue persis ...

javascriptreactjsnpmmaterial-ui

Concealing and revealing information with jQuery and AJAX

Need help hiding a Message and displaying an alert message after 5 seconds, but it's not working. What I want is for the Message to be hidden and show an alert message 5 seconds after clicking submit. <script> $(document).ready(function () { ...

javascripthtmljqueryajax

Ensuring that EJS IF/ELSE statements are evaluated accurately

I am encountering an issue where my variable 'answer' is returning the string 'success' and displaying correctly in the view. However, the IF/ELSE statement always seems to evaluate to the ELSE condition and displays 'no' inst ...

javascriptnode.jsejs

Verify whether the default export of a file is a React function component or a standard function

Trying to figure out how to distinguish between modules exporting React function components and regular functions. Bun employs file-based routing, enabling me to match requests with module files to dynamically import based on the request pathname. Conside ...

javascriptreactjstypescriptbun