Setting a default value for a pair of buttons in VueJS depending on the API response is a straightforward process

Question

Setting a default value for a pair of buttons in VueJS depending on the API response is a straightforward process

One of the challenges I am facing involves toggling a pair of buttons based on the response received from an API. These buttons need to be set only once when the page initially loads.

https://i.sstatic.net/bMgmE.png

Below is the code snippet I am currently utilizing:

<div class="small-7 column btn-switch">
          <span class="switch-statement">"Is it mandatory"</span>
          <button
            :class="!isMandatory ? 'button--secondary' : 'button--tertiary'"
            class="button button-border"
            @click="setMandatory(false)"
          >
           "No"
          </button>
          <button
            :class="isMandatory ? 'button--secondary' : 'button--tertiary'"
            class="button"
            role=`your text`"button"
            @click="setisMandatory(true)"
          >
            "Yes"
          </button>
        </div>

I attempted to use v-if to control the visibility of the buttons but unfortunately it did not yield the desired result. Are there any alternative methods that can be suggested for achieving this functionality?

javascript vue.js frontend

Answer 1

Answer №1

It is possible that the variable isMandatory is dynamic and changes based on the response from the API call. Initially, when the page loads, it will have the default value assigned to it. However, when the API responds at a later point, the page does not refresh.

To provide a more accurate solution, I would need more insight into your code structure. Based on the information provided, it seems like converting isMandatory into a ref could be a potential solution.

For instance, if your code resembles the following:

<script setup>
  isMandatory = false;

  // -> handling of API call
  isMandatory = apiResponse
</script>
<template>
  ...
</template>

You could transform it to:

<script setup>
  isMandatory = ref(false);

  // -> handling of API call
  isMandatory.value = apiResponse
</script>
<template>
  ...
</template>

By doing so, the template will automatically update whenever there is a change in the value of isMandatory.

Answer 2

It is possible that the variable isMandatory is dynamic and changes based on the response from the API call. Initially, when the page loads, it will have the default value assigned to it. However, when the API responds at a later point, the page does not refresh.

To provide a more accurate solution, I would need more insight into your code structure. Based on the information provided, it seems like converting isMandatory into a ref could be a potential solution.

For instance, if your code resembles the following:

<script setup>
  isMandatory = false;

  // -> handling of API call
  isMandatory = apiResponse
</script>
<template>
  ...
</template>

You could transform it to:

<script setup>
  isMandatory = ref(false);

  // -> handling of API call
  isMandatory.value = apiResponse
</script>
<template>
  ...
</template>

By doing so, the template will automatically update whenever there is a change in the value of isMandatory.

Setting a default value for a pair of buttons in VueJS depending on the API response is a straightforward process

Answer №1

Similar questions

When I upgraded my "react-router-dom" from version "5.2.0" to "6.14.0", I encountered a warning stating "No routes matched location"

Looking for the function to activate when the enter key is pressed

Changing the height of tablerows in Material UI v5: A step-by-step guide

Issue encountered in Ionic/React/Typescript - Incorrect props supplied to React.FC<'erroneous props provided here'>

Using JavaScript to Redirect to Homepage upon successful Ajax response on local server

``Is there a more SEO-friendly option instead of using an iframe?

Why doesn't ngSubmit function inside a modal?

What is the best way to convert a Nextjs page into a PDF file?

Having difficulty entering text into the Material UI TextField

The attempt to run 'readAsBinaryString' on 'FileReader' was unsuccessful. The first parameter is not the expected type 'Blob'

"Using JavaScript to toggle a radio button and display specific form fields according to the selected

Selecting Content Dynamically with jQuery

Getting the correct JSON field value from a JavaScript Promise object in the right way

Display the current position of the caret in a field that cannot be edited

Unable to input text by clicking using FabricJS combined with React and Jquery

Guide to eliminating the clearable icon in the Vuetify file input

How to Call a Nested Object in JavaScript Dynamically?

What is the easiest method to transfer a variable from Express to Vue.js?

Can CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Learn how to successfully upload an image using React and Node without having to rely on