vueelement单选框怎么实现传给后端 true false

要实现将 Vue Element UI 的单选框值传给后端，可以使用 v-model 指令绑定一个变量，并将值转换为 true/false。

例如，可以在 template 中这样写：

<template>
  <el-radio v-model="selected" label="true">是</el-radio>
  <el-radio v-model="selected" label="false">否</el-radio>
</template>

然后在 script 中定义 selected 变量：

<script>
export default {
  data() {
    return {
      selected: false
    }
  }
}
</script>

当用户选择“是”时，selected 变量的值会变为 true；当用户选择“否”时，selected 变量的值会变为 false。

在向后端发送数据时，可以将 selected 变量的值转换为 true/false，例如：

axios.post('/api/submit', { selected: this.selected ? true : false })

相关问题

vueelement单选框怎么实现传给后端 true false 点击false 值时 显示 选中的状态

单选框的选中状态和传递值给后端可以通过v-model指令和@change事件来实现。为了在点击false值时显示选中状态，可以在单选框上添加一个样式来控制选中状态的样式。

具体实现步骤如下：

1. 在单选框上绑定v-model指令，将选中状态绑定到一个data中的变量上。

2. 使用@change事件监听单选框的点击事件，在事件处理函数中将选中状态的值转换为true或false，然后将该值传递给后端。

3. 为了在点击false值时显示选中状态，可以在单选框上添加一个样式来控制选中状态的样式，例如添加一个is-checked的类名，并使用CSS样式来控制选中状态的样式。

下面是一个示例代码：

<el-radio v-model="radio" label="true" @change="handleChange">选项1</el-radio>
<el-radio v-model="radio" label="false" @change="handleChange">选项2</el-radio>

<script>
  export default {
    data() {
      return {
        radio: '',
      }
    },
    methods: {
      handleChange(val) {
        this.radio = val === 'true' ? true : false;
        // 将选中状态的值传递给后端
        // ...
      }
    },
  }
</script>

<style>
  /* 控制false值显示选中状态 */
  .el-radio__input.is-checked[value="false"] + .el-radio__inner {
    border-color: #409EFF;
    background-color: #409EFF;
  }
  .el-radio__input.is-checked[value="false"] + .el-radio__inner::after {
    transform: scale(1);
    background-color: #409EFF;
  }
</style>

vueelement单选框怎么实现传给后端 true false 点击false 值时 没有显示 选中的状态

可以通过v-model指令和@change事件来实现单选框的选中状态和传递值给后端。具体实现步骤如下：

1. 在单选框上绑定v-model指令，将选中状态绑定到一个data中的变量上。

2. 使用@change事件监听单选框的点击事件，在事件处理函数中将选中状态的值转换为true或false，然后将该值传递给后端。

3. 为了避免在点击false值时显示选中状态，可以在单选框上绑定一个v-show指令，根据选中状态的值来控制显示或隐藏。

下面是一个示例代码：

<el-radio v-model="radio" label="true" @change="handleChange">选项1</el-radio>
<el-radio v-model="radio" label="false" @change="handleChange">选项2</el-radio>

<script>
  export default {
    data() {
      return {
        radio: '',
      }
    },
    methods: {
      handleChange(val) {
        this.radio = val === 'true' ? true : false;
        // 将选中状态的值传递给后端
        // ...
      }
    },
  }
</script>

<style>
  /* 控制false值不显示选中状态 */
  .el-radio__input.is-checked[value="false"] + .el-radio__inner {
    border-color: #dcdfe6;
    background-color: #fff;
  }
  .el-radio__input.is-checked[value="false"] + .el-radio__inner::after {
    transform: scale(1);
    background-color: #fff;
  }
</style>