Vue单选框绑定数据库

Vue.js 中，你可以通过双向数据绑定（v-model指令）将单选框的选择状态与后端数据库中的字段关联起来。首先，在HTML模板中创建一个 `<input type="radio">` 元素，并给它设置一个 `v-model` 属性，比如：

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1">
      选项A
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2">
      选项B
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option1', // 这里可以是你从数据库获取到的初始值
    };
  },
  // 当然，你需要在实际项目中有一个API来获取或更新数据库
  methods: {
    updateDatabase() {
      // 使用axios或其他HTTP库向服务器发送请求
      axios.put('/api/updateOption', { option: this.selectedOption })
        .then(response => console.log('成功更新'))
        .catch(error => console.error('更新失败:', error));
    }
  },
};
</script>

在这个例子中，当用户选择单选按钮时，`selectedOption` 的值会自动更新，并触发 `updateDatabase` 方法将更改同步到数据库。如果需要根据数据库中的数据动态渲染单选项，可以在`created`或`mounted`生命周期钩子中加载数据。