Vue button with 3-way toggle based on array value

Question

I have a vue project where I'm loading an array on page load and looking at the line item of each, checking the status and trying to show a button for each status with a 3-way toggle.

I think I have the main idea right but the structure is off with the mounting and it being an array. I'm a bit stuck on how to fully get this working but quite simply I want only one button to show for each subItem row based on status.

If subItem status = 'A' I want a button that says Accept, if it's 'B' then pause, and if 'C' then resume. I need the toggle to work and I can then work on calling an axios call based on the status, but I think I just need this working first to get the idea.

subItems is an array like this:

array(2)
    0:
        id: 123,
        status: 'A'
    1:
        id: 234,
        status: 'B'

This is my template/vue code:

<div class="row" v-for="(subItem, key) in subItems" v-cloak>
  <button :class="['btn', 'btn-block', subItem.status == 'H' ? 'accept' : 'resume' : 'pause']" :style="{ border:none, borderRadius: .15 }" v-on:click="pause(subItem)" type="button" role="button" id="" aria-expanded="false">
            {{ subItem.status == 'A' ? 'Accept' : 'Resume' : 'Pause' }}
        </button>
</div>

data() {
    return {
        subItems: [],
    }
}

What is this.isOpen and this.pauseButton?

George
– George

2019-10-02 14:59:13 +00:00
Commented Oct 2, 2019 at 14:59 — George
– George, Commented Oct 2, 2019 at 14:59

George · Accepted Answer · 2019-10-02 15:02:50Z

1

You can use a computed property to extend the property on the data object, or you could do this is the mounted method. A computed property will be better as it will change when the data object does.

new Vue({
  el: '#app',
  computed: {
    formattedSubItems() {
      return this.subItems.map(si => {
        if (si.status === 'A') {
          return { ...si,
            text: 'Accept',
            class: 'accept'
          }

        } else if (si.status === 'B') {
          return { ...si,
            text: 'Pause',
            class: 'pause'
          }


        } else if (si.status === 'C') {
          return { ...si,
            text: 'Resume',
            class: 'resume'
          }

        }
      })
    }
  },
  data() {
    return {
      subItems: [{
          id: 123,
          status: 'A'
        },
        {
          id: 234,
          status: 'B'
        }
      ],
    }
  }
})

.accept {
  color: green
}

.pause {
  color: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="row" v-for="(subItem, key) in formattedSubItems" v-cloak>
    <button class="btn btn-block" :class="subItem.class" :style="{ border:none, borderRadius: .15 }" v-on:click="pause(subItem)" type="button" role="button" id="" aria-expanded="false">
        {{ subItem.text}}
    </button>
  </div>
</div>

answered Oct 2, 2019 at 15:02

George

6,7592 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Geoff_S Over a year ago

This works to display on page load but it doesn't toggle. I'm trying to make it so that it can toggle in real time and then I can make the axios calls dependent on that state

Narendra Jadhav · Accepted Answer · 2019-10-02 15:50:57Z

0

You could also create a button object that contain your button name with based on your key. Like below example

buttons: {
   A: 'Accept',
   B: 'Pause',
   C: 'Resume'
}

And this buttons object you can use when you looping your subItems.

Please check below working code snippet.

new Vue({
  el: '#app',
  methods: {
    getClass(subItem) {
      return this.buttons[subItem.status].toLocaleLowerCase();
    },
    pause(subItem) {
      console.log(this.buttons[subItem.status])
    }
  },
  data() {
    return {
      subItems: [{
        id: 123,
        status: 'A'
      }, {
        id: 234,
        status: 'B'
      }, {
        id: 235,
        status: 'C'
      }],
      buttons: {
        A: 'Accept',
        B: 'Pause',
        C: 'Resume'
      }
    }
  }
})

.accept {
  color: green
}

.pause {
  color: violet
}

.resume {
  color: red
}

.btn-block {
  cursor: pointer;
  border: 1px solid;
  padding: 5px 10px;
  margin: 10px;
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="row" v-for="(subItem, key) in subItems">
    <button class="btn btn-block" :class="getClass(subItem)" @click="pause(subItem)" role="button" aria-expanded="false">
        {{ buttons[subItem.status]}}
    </button>
  </div>
</div>

edited Oct 2, 2019 at 15:50

answered Oct 2, 2019 at 15:45

Narendra Jadhav

10.3k15 gold badges35 silver badges45 bronze badges

5 Comments

Geoff_S Over a year ago

Thisb only works on page load though, it doesn't work to toggle when the button is pressed

Narendra Jadhav Over a year ago

@TomN. And what you want when button pressed ?

Geoff_S Over a year ago

To toggle so if I hit the accept button it makes the status b and if I hit pause it goes from b to c

Geoff_S Over a year ago

I think I just realized my problem. if status = 'A' I need to show an accept button, otherwise I show a separate button that toggles pause and resume

Narendra Jadhav Over a year ago

but why you want to this if I hit the accept button it makes the status b and if I hit pause it goes from b to c? din't understand this @TomN.

Collectives™ on Stack Overflow

Vue button with 3-way toggle based on array value

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related