Improving the efficiency and readability of JavaScript syntax (specifically conditional statements with if-else) in Vue.js

Seeking advice on optimizing and simplifying this syntax in Vue's methods section:

methods: {
    getColorBtn(status, isCorrect, isRemind, textButton) {
      if (status === 1 && isCorrect === 1 && isRemind === 1) return 'v-btn--outlined theme--light primary--text'
      if (status === 1 && isCorrect === 0 && isRemind === 1) return 'primary plain--text'
      if (status === 0 && isCorrect === 0 && isRemind === 1) {
        return 'v-btn v-btn--text theme--light success--text shadow-none'
      }
      if (status === 0 && isCorrect === 0 && isRemind === 0) {
        return 'v-btn v-btn--text theme--light primary--text shadow-none'
      }

      return 'primary'
    },
    textButton(status, isCorrect, isRemind, textButton) {
      if (status === 1 && isCorrect === 1 && isRemind === 1) return 'Corrected'
      if (status === 1 && isCorrect === 0 && isRemind === 1) return 'Correction'
      if (status === 0 && isCorrect === 0 && isRemind === 1) return 'Reminded'
      if (status === 0 && isCorrect === 0 && isRemind === 0) return 'Remind'

      return 'primary'
    },
    getIcon(status, isCorrect, isRemind, textButton) {
      if (status === 1 && isCorrect === 1 && isRemind === 1) return 'd-none'
      if (status === 1 && isCorrect === 0 && isRemind === 1) return 'd-none'
      if (status === 0 && isCorrect === 0 && isRemind === 1) return mdiBellCheckOutline
      if (status === 0 && isCorrect === 0 && isRemind === 0) return mdiBellOutline

      return ''
    },
    getColorChip(status) {
      if (status === 1) return 'v-chip-light-bg success--text'

      return 'v-chip-light-bg error--text'
    },
}
the outcome

The data() (Just displaying with one example here for structure reference):

data() {
    return {
      isHide: true,
      icons: {
        mdiBellOutline,
        mdiBellCheckOutline,
      },
      students: [
        {
          no: '1',
          thumbnail,
          name: 'Ridho Mckinnon',
          status: 1,
          time: ' 08:04 - 09:58, 19/01/2021',
          isCorrect: 1,
          isRemind: 1,
        },
    }
}

The outcome: view image

The data() (Showing a dummy example with just one data entry):

data() {
    return {
      isHide: true,
      icons: {
        mdiBellOutline,
        mdiBellCheckOutline,
      },
      students: [
        {
          no: '1',
          thumbnail,
          name: 'Ridho Mckinnon',
          status: 1,
          time: ' 08:04 - 09:58, 19/01/2021',
          isCorrect: 1,
          isRemind: 1,
        },
    }
}

New to JS and Vue, seeking guidance on improving coding practices. Thank you in advance.

Answer №1

Utilize nested arrays and objects for optimal organization.

const designElements = {
    element: 'style',
    1: {
        sector: 'header',
        1: {
            attribute: 'colorScheme',
            1: 'blue'
        },
        0: {
            attribute: 'colorScheme',
            1: 'red'
        }
    0: {
        sector: 'footer',
        0: {
            attribute: 'colorScheme',
            1: 'green',
            0: 'purple'
        }
    }
}

applyDesign(element, sector, attribute, customStyle) {
    return designElements.?[element].?[sector].?[attribute] || 'default';
}

Implement a similar approach for the remaining functions as well.

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

The compatibility issue between jQuery Tabs and Sliding effect

Hey there, I'm currently working on a website that requires a vertical tab system. I also have an arrow image that shows which tab or thumbnail the user has selected, and it should smoothly slide between the two thumbnails. You can check out the pro ...

Mysterious line break emerges upon displaying JavaScript through PHP

I have a situation where I am using PHP to output JavaScript for a WordPress shortcode. This is what my PHP code looks like: $output="<script type='text/javascript' > jQuery(document).ready(function() { jQuery('#photo{$photo_id}&a ...

What is preventing the table from extending to the full 100% width?

Displayed above is an image showing an accordion on the left side and content within a table on the right side. I have a concern regarding the width of the content part (right side) as to why the table is not occupying 100% width while the heading at the ...

Modify the value of a CSS property through JavaScript

Hey there, I'm wondering how to change a CSS value of the document itself, rather than targeting a specific element. I've already looked into solutions like Change :hover CSS properties with JavaScript, but they all involve adding CSS rules. I a ...

Using back end proxy for content delivery

I am facing a challenge with my iOS app that requires proxying through a private server (HTTP / HTTPS proxy). Every time I attempt to address this issue on the client-side, new problems arise. How can I use the back end to effectively solve this problem? ...

Unable to retrieve property from Vuex store object

Firstly, I start up my store using the JSON file named config.json: { "branding": { "button": { "secondary": { "background_color": "#EC6B24", ... }, ... } } } ...

Using mapGetters with both modules and root getters simultaneously: A comprehensive guide

When using mapGetters in Vuex, I can easily call getters from a single root or module. For example, if I have a getter called firstRootGetter in the store/index.js, I would use ...mapGetters(['firstRootGetter']) in my Vue component. However, thi ...

What does [] represent in the context of the [].forEach.call() method?

I'm a bit confused about the meaning of [] in the code snippet below. Is it just indicating the most recently declared array? Can someone provide clarification? In this particular example, we have two arrays named racersList and volunteersList stored ...

Rows in the table mysteriously vanish when you switch to the following page

I am a beginner with React and I am currently using an addrow method to populate a table that I created using {this.state.rows.map}. The table successfully displays the values from the input fields. However, when I navigate away using the continue button a ...

The Javascript Image() function fails to load or render

I am currently in the process of developing a basic Sprite class for implementation in a canvas game. However, I am encountering an issue where the image specified during the creation of a new instance of the class does not trigger the onload or onerror ev ...

React.js: The art of nesting components within each other

One common feature in many template languages is the use of "slots" or "yield" statements, which allow for a form of inversion of control by wrapping one template inside another. Angular offers the "transclude" option for this purpose. Ruby/Rails utilize ...

What could be causing the malfunction of my token rotation feature in nextAuth?

I am developing a web application that involves working with an external API alongside my team member. We are making API requests using Next.js. I have implemented nextAuth for authentication, but I am facing issues with token rotation. After successful lo ...

A Sweet Alert to Deliver your Morning Toasty Message

I seem to be encountering an issue with my toast message. Instead of the toast popping up immediately after submitting the form, it keeps appearing even if I haven't submitted the form and even when navigating from another page to this one, the toast ...

Vuejs method to showcase input fields based on form names

I am working on a Vue.js form component with multiple input fields, but now I need to split it into two separate forms that will collect different user input. Form 1 includes: Name Surname Email with a form name attribute value of form_1 Form 2 i ...

Building a dynamic URL in ReactJS from scratch

const selectedFilters = { category: "", mealtype: "lunch", cuisinetype: "Italian", dishType: "Pasta" } const apiUrl = `https://api.edamam.com/api/recipes/v2?type=public&q=${query}&app_id=${app_id}&app_key=${app_key}`; User ...

Creating a User Authentication System using Node.js and Express

I am currently working on developing an application with node.js and expressJs, even though I come from a PHP background. In PHP, we typically use the session to handle logins, so naturally, I thought that in the case of node.js it would be similar. After ...

Add an item with a combination of different data types (such as objects and arrays) to a Mongo database, but encountering

I am currently working on posting an item to MongoDB using a combination of Node.js, Express, Mongoose, and Vue.js. The item I am trying to post consists of a mix of objects and arrays. Although the object post is successful in generating an ID, the data i ...

What is the best way to upload a canvas image from a GUI to the back-end using an AJAX call and setting the content-type as "image/jpeg"?

What is the best method for saving a canvas image from GUI to back-end using an AJAX call that accepts content type "image/jpeg" and avoids the error "jquery.js: 8453 Uncaught TypeError: Illegal invocation?" HTML <canvas id="myImage"></canvas> ...

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

Tips for adjusting the minimum attribute within an input field with jQuery

In my form, I have an input field with arrows (up and down). Next to it, there are two buttons: + and -. When I click on the input field and then use the arrow, the system retrieves the value from a dropdown list, which works fine. However, when I use the ...