vue.js 如何通过:checked或:unchecked属性更改单选按钮的可检查性状态

niknxzdl  于 2023-06-24  发布在  Vue.js
关注(0)|答案(1)|浏览(185)

如下面的代码所示,我有两个radio-buttons,最初它们都是未选中的。第一个,当勾选时,change_()中的日志消息打印男性。第二个在检查change_()中的日志消息时打印女性。我想询问以下问题:
1-如何通过:unchecked属性更改radio-button的可检查性状态?换句话说,当radio-button未选中时,我试图将check1的值更改为例如malefemale或任何其他文字值,然而,这不会触发radio-button的可检查性状态的任何更改我希望能够通过:unchecked属性更改radio-button的可检查性状态。这可能吗?
2-如果后一点的答案是“不可能”,那么:uncheckedchecked属性的目的是什么?是否只是设置单选按钮的初始检查状态?
3-由于radio-buttons最初是未检查的,当我检查它们时,这并没有导致check1check2的插值显示。我期望当radio-button从未检查状态切换到检查状态时,因此{{}}之间的内插文本也会改变,但这并没有发生

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
<input type="radio" :unchecked="check1" @change="(event)=>change_(event)" :value="male" />
<input type="radio" :unchecked="check2" @change="(event)=>change_(event)" :value="female" />
<div>selected radio1: {{ check1 }}</div>
<div>selected radio2: {{ check2 }}</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<script setup>
const check1 = ref('')
const check2 = ref('')
const male = ref('male')
const female = ref('female')

function change(params) {
  console.log("change_:",params.target.value);
}

</script>
tv6aics1

tv6aics11#

要使用:checked和:unchecked属性更改单选按钮的可检查状态,需要对代码进行以下修改:
更新单选按钮的checked和unchecked属性,将它们分别绑定到check1和check2变量:
更新change_ function以根据所选单选按钮更新check1和check2变量:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <input type="radio" :checked="check1" @change="(event) => change_(event, 1)" :value="male" />
  <input type="radio" :checked="check2" @change="(event) => change_(event, 2)" :value="female" />
  <div>selected radio1: {{ check1 }}</div>
  <div>selected radio2: {{ check2 }}</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<script setup>
const check1 = ref('');
const check2 = ref('');
const male = ref('male');
const female = ref('female');

function change_(event, option) {
  if (option === 1) {
    check1.value = event.target.value;
  } else if (option === 2) {
    check2.value = event.target.value;
  }
}
</script>

相关问题