Vue中如何获取点赞/差评单选按钮选中值并提交到API接口

界面预览 #

以下是几种常见的取值实现方案，你可以根据自己的技术栈选择：

方案1：Vue双向绑定（最常用） #

你的代码中使用了Vue的:value绑定语法，直接用v-model绑定响应式变量即可自动同步选中值：

1. 先在组件的script部分定义响应式变量存储评价结果：

// Vue3 setup语法示例
import { ref } from 'vue'
// 初始值和默认选中的点赞状态保持一致
const rating = ref(true)

2. 给两个Field组件添加v-model绑定该变量：

<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"
      v-model="rating"
    />
    <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"
      v-model="rating"
    />
    <label
      class="btn btn-outline-danger"
      for="danger-outlined"
      ><i class="far fa-thumbs-down"></i> Nicht so</label
    >
  </div>
</div>

3. 提交请求时，直接把rating的值传给API即可，true对应点赞，false对应差评。

方案2：配合VeeValidate表单库场景 #

如果你用的是VeeValidate的Field组件，直接通过表单实例获取值即可：

1. 把两个Field的name属性统一修改为业务字段名，比如isPositive：

<Field
  type="radio"
  class="btn-check"
  name="isPositive"
  id="success-outlined"
  autocomplete="off"
  checked
  :value="true"
/>
<!-- 差评的Field同样把name改为isPositive -->

2. 在提交表单的回调里直接获取对应值：

import { useForm } from 'vee-validate'

const { handleSubmit } = useForm()

const onSubmit = handleSubmit(values => {
  // values.isPositive 就是选中的结果，true为点赞，false为差评
  // 直接把该值传给你的API即可
  fetch('你的API接口地址', {
    method: 'POST',
    body: JSON.stringify({
      rating: values.isPositive,
      // 其他业务参数
    })
  })
})

方案3：原生DOM取值（兜底方案） #

如果不需要双向绑定，提交时临时取值可以用原生选择器实现：

// 注意：input的value默认是字符串类型，需要转布尔值的话可以用JSON.parse处理
const selectedVal = document.querySelector('input[name="options-outlined"]:checked').value
const isLike = JSON.parse(selectedVal)

内容的提问来源于stack exchange，提问作者roxena