Как привязать значение кнопки в vuejs?

Question

Как связать значения кнопок в Vuejs? на самом деле я ищу что-то вроде:

<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

Answer 1

Вы можете сделать это как

<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>

Answer 2

Группа кнопок

Bootstrap не позволяет использовать атрибут v-model, поэтому вы можете сделать это вручную, например

  <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>