Tips for streamlining code using switch statements in vue.js

Is there a more efficient way to simplify this switch statement for handling 5 different cases? Can I streamline the process of updating the completion status based on each step?

data() {
        return {
            stepOneIsCompleted: false,
            stepTwoIsCompleted: false,
            stepThreeIsCompleted: false,
            stepFourIsCompleted: false,
            stepFiveIsCompleted: false,
        };
    },

updateViewEditVisibility(step, status) {
            switch (step) {
            case 1:
                status === 200 ? this.stepOneIsCompleted = true : this.stepOneIsCompleted = false;
                break;

            case 2:
                status === 200 ? this.stepTwoIsCompleted = true : this.stepOneIsCompleted = false;
                break;

            case 3:
                status === 200 ? this.stepThreeIsCompleted = true : this.stepOneIsCompleted = false;
                break;

            case 4:
                status === 200 ? this.stepFourIsCompleted = true : this.stepOneIsCompleted = false;
                break;

            case 5:
                status === 200 ? this.stepFiveIsCompleted = true : this.stepOneIsCompleted = false;
                break;
            }
        },

Could I potentially optimize this by using an array and assigning values based on the step number provided as props?

javascriptvue.js

Answer №1

initializeData() {
    return {
        stagesCompleted: [
            false,  //stageOneIsCompleted
            false,  //stageTwoIsCompleted
            false,  //...
            false,
            false
        ]
    }
}

...

toggleStageVisibility(stage, completionStatus) {
    this.stagesCompleted[stage] = completionStatus === 200;
}

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

Guide to automatically refresh the source link every 5 seconds using a different .php link

Is there a way to automatically refresh the source link every 5 seconds in order to display an image from another page on index.php? On index.php <img id="img1" class="imgNews" src="https://example.com/car.jpg"> On other.php <span id="link1"&g ...

javascriptphphtml

Having trouble loading services within my Angular controller

After developing my Angular application, I added some basic code to my controller which is displayed below. Now, I am attempting to include two services that I created in my services.js file. This file is being loaded in my index.html and required within m ...

javascriptangularjsionic-framework

Issue with Swiper js "autoheight" not resizing correctly for the height of the first slide upon page initialization

Hey everyone, I'm encountering a problem with my reactapp and I'm not sure how to resolve it. I've spent a considerable amount of time searching on stackoverflow but haven't come across any helpful solutions. The issue is related to a ...

javascriptreactjsnext.jsswiper.jsreact-swiper

Conceal the parent div from its sibling within the same parent container

My goal is to conceal a parent component from its child element. I attempted to achieve this by using the parent component as a background while adding additional backgrounds to the child elements for overriding purposes. However, this method did not work ...

javascriptcssreactjsnext.jsfrontend

NextJS for Self-hosting Fonts

I'm facing difficulties with self-hosting webfonts in my NextJS application. The browser is trying to access the fonts using this URL: localhost:3000/_next/static/css/fonts/Avenir.woff2 However, the actual path for these fonts is: _project_dir/static ...

javascriptreactjsnext.jswebfontsweb-performance

Is there a more efficient method to tally specific elements in a sparse array?

Review the TypeScript code snippet below: const myArray: Array<string> = new Array(); myArray[5] = 'hello'; myArray[7] = 'world'; const len = myArray.length; let totalLen = 0; myArray.forEach( arr => totalLen++); console.log(& ...

javascriptarraystypescript

Choose only the options that are present in both arrays

I am working on creating a multiple select feature that displays all nodes, but only checks the ones that are present in 2 arrays. My front end is developed using Angular 8 and TypeScript. private mountSelect(nodesInRelation, lineApiKey) { console.lo ...

javascripthtmlangulartypescript

Exploring the functionality of dimensions in d3 parcoords

I am diving into the world of d3 and experimenting with Behold, a simplistic example directly from the website. <script src="http://d3js.org/d3.v3.min.js"></script> <script src="d3.parcoords.js"></script> <link rel="stylesheet" ...

javascriptd3.jsdimensions

How to apply class binding within a v-for loop in Vue.js

When using Vuejs3, I am currently iterating through an array of objects: <div v-for="ligne in lignes" :key="ligne.id" :class="{ 'border-b-2':isSelected }" :id="`ligne_${ligne.id}`" > ...

javascriptvue.jsvuejs3v-for

How can I structure the response from HttpClient to make it compatible with *ngFor

I need assistance in solving a minor issue. I am working with data from a REST API, which is returned as an array of objects. After receiving this data in my service, I attempt to transform it and push it to a subject to notify my component about the arriv ...

javascriptangular

Adjusting the waterlevel model attribute to its standard value

In my Sails.js project, I am looking to reset a model attribute back to its original default value. By default value, I mean the value specified using defaultsTo in the model file. I have attempted methods such as: model.update({id:exampleId}, {myAttrib ...

javascriptnode.jsexpresssails.jswaterline

Javascript textfield button function malfunctioning

Here is the code I have created: HTML: <form method="post" id="myemailform" name="myemailform" action="form-to-email.php"> <div id="form_container"> <label class="descriptio ...

javascriptjqueryhtml

Animate CSS Grid to dynamically fill the viewport on top of current grid elements

Please note that I am specifically seeking vanilla JS solutions, as jQuery is not compatible with this project I have a grid structure that is somewhat complex: body { margin: 0; height: 100vh; text-align: center; } .grid-container { ...

javascripthtmlcsscss-gridanime.js

When trying to import the CSS from a library into the component styles, I am encountering a "dependency not found" error despite having the library properly

<style lang="scss"> @import 'tippy.js/dist/tippy.css'; //@import "@/assets/vars.scss"; .chart-tooltip-slim { color: #fff; padding: 10px 15px; } .chart-tooltip { min-width: 260px; color: #fff; padding: 15px 30 ...

vue.jssassvuejs2vue-componenttippyjs

"Enhancing the user experience: Triggering a window resize event in jQuery before page load on Magento

I am trying to trigger this function before the page finishes loading, but currently it only triggers after the page has loaded. Can anyone assist with this issue? $(window).on('load resize', function(){ var win = $(this); //this = window ...

javascriptjquery

Is it possible to retrieve a JSON property using a string?

Here is the JSON I am working with: json_filter = {"CO": "blah"} I am attempting to access the member 'CO' using a string value, but the result keeps coming back as undefined. var selectedState = $(this).val(); // The state selected is 'C ...

javascriptjqueryjson

Is there a way to make a selected option stay selected in vue.js 2?

Here is the structure of my Vue component : <template> <select class="form-control" v-model="selected" :required @change="changeLocation"> <option :selected>Choose Province</option> <option v-for="option in o ...

javascriptvue.jsvuejs2vue-component

The proper way to cancel useEffect's Async in TypeScript

I'm facing an issue with this straightforward example: useEffect(() => { axios.get(...).then(...).catch(...) }, [props.foo]) warning: can't perform a react state update on an unmounted component After some investigation, I found this ...

javascriptreactjstypescriptuse-effect

Interacting with APIs in Svelte applications

I'm fairly new to utilizing Svelte and JavaScript. I've been attempting to construct a page that incorporates numerous API components from external websites, but I'm facing some challenges. I'm uncertain about where exactly to place the ...

javascriptsveltesapper

Utilize CSS properties to pass as arguments to a JavaScript function

Is there a way for me to make my CSS animation functions more efficient? I have similar functions for different properties like height, width, and left. Can I modify the function below to accept a CSS property argument instead of hardcoding height? Window ...

javascriptcss