vue：保存选定按钮的值

Question

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

我的代码如下所示：

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

我现在尝试保存所选按钮的值。当用户选择我需要的“喜欢”时，将此值发送到我的 api。

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

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 来解决此问题。