vue: save value of selected button-CodePudding

In my webapplication the user can rate a booking. He can select the like or dislike button.

My code looks like this:

 <div >
                    <div
                      
                      role="group"
                      aria-label="Basic example"
                    >
                      <Field
                        type="radio"
                        
                        name="options-outlined"
                        id="success-outlined"
                        autocomplete="off"
                        checked
                        :value="true"
                      />
                      <label
                        
                        for="success-outlined"
                      >
                        <i ></i> Super!</label
                      >

                      <Field
                        type="radio"
                        
                        name="options-outlined"
                        id="danger-outlined"
                        :value="false"
                        autocomplete="off"
                      />
                      <label
                        
                        for="danger-outlined"
                        ><i ></i> Nicht so</label
                      >
                    </div>
                  </div>

I try now to save the value of the selected button. When the user selects the "like" I need so send this value to my api.

But I don't know how to read the value of the selected button. Can someone help me? Thank you in advance!

CodePudding user response：

There are differenct options to work with that problem.

I would prefer to add click-events in your <Field> and work with them in the methods - like this:

<Field @click="Super()"/>
<Field @click="NichtSo()"/>

and than go to your methods and do it like following:

methods: {
  Super() {
    //send data to API when it's good
  },

  NichtSo() {
    //do something else
  }
}

Think this is the easiest way to do something like that.

Additional Info: You can also use v-model to solve this problem.