In this code i want to change the variable name 'frontenditems' and 'whoAmI' wheneve i clicked check and radiobutton but it is showing olny on - vue.js

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>
In frontend items i want to get stored array values 'vue', 'react' and 'angular' and in whoAmI varaiable i want to get either developer or programmer whenever i click check and radio button but I am only getting 'on' as a value

Answer 1

You're missing value on each of your inputs. When a checkbox or radio input is selected value is what gets added to your v-model array
<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>