What is the method for setting a variable as a value within an object?

While working with Vue.js, I encountered an issue where I wanted to assign an array stored in the data variable roomFilters to the key -> items in the filter1 object. Unfortunately, my code is not functioning as expected. Even though I can access the array in the roomFilters state variable, I am unsure how to properly use it inside the object.

<script>
import { mapState, mapActions } from 'vuex';
import ns from '@/vue/store/namespaces';

export default {
    data() {
        return {
            filterData: {
                filter1: {
                    key: 'filter1',
                    title: 'Space Attributes',
                    criteriaType: 'Multivalue',
                    items: this.roomFilters,
                    itemsToShow: 2
                },
            }
        };
    },
    computed: {
        ...mapState(ns.global, ['roomFilters'])
    },
    created() {
        this.fetchRoomFilters();
    },
    methods: {
        ...mapActions(ns.global, ['fetchRoomFilters']),
        
    }
};
</script>

Answer №1

To ensure that your property is properly linked to the others, it should be designated as a computed property:

export default {
data() {
    return {
       
    };
  },
  computed: {
    ...mapState(ns.global, ['roomFilters']),
    filterData(){
         return {
            filter1: {
                key: 'filter1',
                title: 'Space Attributes',
                criteriaType: 'Multivalue',
                items: this.roomFilters,
                itemsToShow: 2
            },
        }
   }
  },
  created() {
    this.fetchRoomFilters();
  },
  methods: {
    ...mapActions(ns.global, ['fetchRoomFilters']),
    
    }
  }
};

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

Is it possible for me to transform this code into a useful helper function?

I am looking to optimize this conditional code by converting it into a helper function using a switch statement instead of multiple if statements. How can I achieve this in a separate file and then import it back into my component seamlessly? import { ...

AngularJS - "Refrain from replicating items in a repeater"

I am facing an issue with creating HTML textarea elements for each member of an array. Despite consulting the AngularJS documentation and attempting different track by expressions, I am unable to render them. The problem arises when a user inputs the same ...

The dynamic page fails to export with a static export in NextJS, resulting in an output error: "

I'm struggling to export a route in my NextJS 14 project. I've set the output to export and all routes are exporting correctly except for the dynamic ones. The folder for the dynamic route is not showing up in the output folder The version of Ne ...

Incorporate JavaScript files into your Gruntfile

I utilized a bootstrap-compass project by using the yeoman generator provided in this link: https://www.npmjs.com/package/generator-bootstrap-compass You can view the file structure through the link mentioned above. Now, I am looking for guidance on cor ...

Can someone suggest a more efficient method to extract information from my HTML data?

Currently, I am populating list boxes and other elements by appending HTML. I retrieve PHP data from a JSON file using AJAX, which gives me more flexibility in terms of reloading elements on the page and reducing unnecessary page loads. function tracker_l ...

Encountering a Typescript error while executing an npm script

Upon running tsc && npm run browserify && npm run minify, I encounter the following error: lib/helper.ts:71:38 - error TS4078: Parameter 'inputData' of exported function has or is using private name 'Buffer'. 71 inpu ...

What is the best way to extract the text from a class only when it is nested within a particular header tag?

const request = require ('request'); const cheerio = require('cheerio'); const fs = require ('fs'); request("http://kathmandupost.ekantipur.com/news/2018-08-31/bimstec-summit-multilateral-meet-underway.html", (error, response ...

Unable to assign the "innerHTML" property to a string

Currently, I am working on developing an Issue Tracker with two main functions. The first function, saveIssue(), is responsible for saving submitted issues to localStorage triggered by the submit eventListener. The second function, fetchIssues(), retriev ...

Everything was working perfectly with the Javascript code until I attempted to encapsulate it within

I found some helpful source code here for using AJAX to submit a form and store user information in a database using PHP. While the code I initially used worked, I realized that for efficiency, I needed to streamline it for multiple forms performing the sa ...

Tips for executing nodemon and forever in the background

Good morning! Having an issue with my node.js server running in the background. I came across this helpful thread on Stack Overflow which suggested using Forever + Nodemon together I like the concept, however, when I implement it as shown here: forever ...

Tips for sending a PHP JSON array to a JavaScript function using the onclick event

I am trying to pass a PHP JSON array into a JavaScript function when an onclick event occurs. Here is the structure of the PHP array before being encoded as JSON: Array ( [group_id] => 307378872724184 [cir_id] => 221 ) After encoding the a ...

The Vuetify v-img component fails to display images when using absolute paths

Having a bit of trouble here: I want to showcase an image using an absolute path in Vuetify with the v-img tag, but for some reason, it's not displaying. I attempted to use :src="require('path/to/img')", but it throws an error saying "This ...

Assigning random classes from a pool of just 3 variables to over 20 different div elements

I have a total of 20 divs and three different hover effect classes. I would like to randomly assign one of these three hover effects to each div. The JavaScript code I am using is: <script> $(document).ready(function () { viewClasses = 3; randomNum ...

What is the process for storing a JWT-TOKEN in localStorage using JavaScript within an HTML script?

Currently, I am in the process of developing a web application using the Rest MVC architecture for an online store specializing in coffee and tea products. The technologies being utilized include Spring-Boot, Hibernate, PostgreSQL, Gradle, Thymeleaf, HTML, ...

Native JavaScript does not handle AJAX responses correctly

I'm facing an issue with my ajax call where the returned HTML works well on changes, but the Javascript that should perform actions based on clicks within the results is not functioning properly. Here is the ajax call: function update_order_shipp ...

What is the process of calculating the cartesian product using TypeScript?

My desired type signature is as follows: function cartesianProduct<T1, T2, T3, T4, T5, T6, T7, T8>([c1, c2, c3, c4, c5, c6, c7, c8]: [T1[], T2[], T3[], T4[], T5[], T6[], T7[], T8[]]): [T1, T2, T3, T4, T5, T6, T7, T8][]; function cartesianProduct<T ...

Firebase allows for the updating of an object within a nested array

Within Firestore, I have a Document that includes a property named "items" which is of type array. This array consists of ShoppingItem objects with the specified structure: export class ShoppingItem { id?: string; name: string; checked = false; } To ...

Guide on invoking an ajax function within a for loop

As someone new to ajax and JavaScript, my goal is to call an ajax function multiple times to retrieve specific data from a resource and then store all of that data in an array for later use in my code. Below is the code I have so far: var arr = []; var us ...

Exploring the Angular framework: Combining form requirements and controllers in directives' link functions

In my coding journey, I have developed a powerful directive known as formNavHandler. This directive plays a crucial role in handling dirty checking and smooth navigation between different pages. The functionality of formNavHandler heavily relies on the exp ...

Hapi/Node.js Reference Error for Request: Troubleshooting the Issue

I am facing an issue with my two API handlers: module.exports.loginWeb = function (request, reply, next) { if (request.auth.isAuthenticated) { return reply.redirect('/'); } if(request.method === 'get'){ rep ...