How to bind value of a button in vuejs?

Question

How can I bind values of buttons in Vuejs ? actually i am looking for something like:

<b-button-group>
     <b-btn value="one" v-model="stateButtons">one</b-btn>
     <b-btn value="two" v-model="stateButtons">two</b-btn>
     <b-btn value="three" v-model="stateButtons">three</b-btn>
</b-button-group>

<p>Chossen: {{stateButtons}}</p>  // show the value of selected button

Qonvex620 · Accepted Answer · 2020-01-21 07:10:17Z

1

You can do it like

<b-button-group>
     <b-btn value="one"  @click="stateButtons = "one">one</b-btn>
     <b-btn value="two" @click="stateButtons = "two">two</b-btn>
     <b-btn value="three" @click="stateButtons = "three">three</b-btn>
</b-button-group>

answered Jan 21, 2020 at 7:10

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

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

Comments

Anis · Accepted Answer · 2020-01-21 07:13:18Z

0

Bootstrap button group doesn't allow any v-model attribute so you can do it manually like

  <b-button-group >
      <b-btn @click="stateButtons = 'one'">one</b-btn>
      <b-btn  @click="stateButtons = 'two'">two</b-btn>
      <b-btn @click="stateButtons = 'three'">three</b-btn>
    </b-button-group>

    <p>Chossen: {{stateButtons}}</p>

answered Jan 21, 2020 at 7:13

Anis

1,2293 gold badges16 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to bind value of a button in vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related