在此代码中，我想更改变量名称'frontenditems'，并在我单击检查和单选按钮时'whoAmI'，但它在

Question

<template>
<p>FrontEnd Items</p>
<label for="vue">Vue.js</label>
<input type="checkbox" name="vue" id="vue" v-model="frontendItems">
<label for="React">React.js</label>
<input type="checkbox" name="React" id="React" v-model="frontendItems">
<label for="Angular">Angular.js</label>
<input type="checkbox" name="Angular" id="Angular" v-model="frontendItems">
<p>
You have selected :- {{ frontendItems }}
</p>
<p>For radio Buttons</p>
<p>Who am I</p>
<label for="developer">Developer</label>
<input type="radio" name="developer" id="developer" v-model="whoAmI">
<label for="programmer">Programmer</label>
<input type="radio" name="programmer" id="programmer" v-model="whoAmI">
<p>
I am :- {{ whoAmI }}
</p>
</template>
<script>
export default {
name : 'CheckRadiobinding',
data(){
return {
frontendItems:[],
whoAmI : null
}
}
}
</script>

在前端项目中，我想获得存储数组值'vue'， 'react'和'angular'，并在whoAmI变量中，我想获得开发人员或程序员，每当我点击检查和单选按钮，但我只获得'on'作为值

Answer 1

您的每个输入都缺少value。当选中复选框或单选输入时，value将被添加到v-model数组

<template>
<p>FrontEnd Items</p>
<label for="vue">Vue.js</label>
<input
id="vue"
v-model="frontendItems"
value="Vue.js"
type="checkbox"
name="vue"
/>
<label for="React">React.js</label>
<input
id="React"
v-model="frontendItems"
value="React.js"
type="checkbox"
name="React"
/>
<label for="Angular">Angular.js</label>
<input
id="Angular"
v-model="frontendItems"
value="Angular.js"
type="checkbox"
name="Angular"
/>
<p>You have selected :- {{ frontendItems }}</p>
<p>For radio Buttons</p>
<p>Who am I</p>
<label for="developer">Developer</label>
<input
id="developer"
v-model="whoAmI"
value="Developer"
type="radio"
name="developer"
/>
<label for="programmer">Programmer</label>
<input
id="programmer"
v-model="whoAmI"
value="Programmer"
type="radio"
name="programmer"
/>
<p>I am :- {{ whoAmI }}</p>
</template>