vue：保存所选按钮的值

Question

在我的网络应用程序中，用户可以对预订进行评分。他可以 select 喜欢或不喜欢按钮。

我的代码如下所示：

 <div class="col-4 col-form-label">
                    <div
                      class="btn-group"
                      role="group"
                      aria-label="Basic example"
                    >
                      <Field
                        type="radio"
                        class="btn-check"
                        name="options-outlined"
                        id="success-outlined"
                        autocomplete="off"
                        checked
                        :value="true"
                      />
                      <label
                        class="btn btn-outline-success"
                        for="success-outlined"
                      >
                        <i class="far fa-thumbs-up"></i> Super!</label
                      >

                      <Field
                        type="radio"
                        class="btn-check"
                        name="options-outlined"
                        id="danger-outlined"
                        :value="false"
                        autocomplete="off"
                      />
                      <label
                        class="btn btn-outline-danger"
                        for="danger-outlined"
                        ><i class="far fa-thumbs-down"></i> Nicht so</label
                      >
                    </div>
                  </div>

我现在尝试保存 selected 按钮的值。当用户 select 点赞时，我需要将此值发送到我的 api.

但我不知道如何读取 selected 按钮的值。有人能帮我吗？提前致谢！

Answer 1

有不同的选项可以解决这个问题。

我希望在您的 <Field> 中添加 click-events 并在 methods 中与他们合作 - 像这样：

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

然后转到您的方法并按照以下方式进行操作：

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

  NichtSo() {
    //do something else
  }
}

认为这是执行类似操作的最简单方法。

附加信息：您也可以使用v-model来解决这个问题。

vue：保存所选按钮的值

vue: save value of selected button

api

radio-button

vue.js