Display fields compared of a value - vue.js

Question

I have a number (size) field that can range from 0 to 7. I also have an intensity object that has 2 fields (in and out) I would like to display the number of objects in relation to the number in the number +1 field
What method can I use to solve my problem ?
I made a JSFiddle if someone have a solution for me .
https://jsfiddle.net/sebastianczech/2wfapuv4/61/
I also need, when I check the 'In = Out' checkbox, to attribute to 'Out' the same value than 'In'.
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
<v-app >
<h1>Selection</h1>
<div v-for="car in cars">
<v-select
label="Selection"
:items="car.version"
item-text="color"
>
</v-select>
<v-text-field
label="Size"
type="number"
min="1"
max="8"
v-model="sizeValue">
</v-text-field>
<div v-for="(int, index) in intensity">
<v-text-field
label="In"
type="number"
min="1"
max="100"
v-model="int.in">
</v-text-field>
<v-text-field
label="Out"
type="number"
min="1"
max="100"
v-model="int.out">
</v-text-field>
</div>
</div>
<v-checkbox label="Apply to All" v-model="checkboxAll"></v-checkbox>
<v-checkbox label="In = Out" v-model="checkboxInOut"></v-checkbox>
</v-app>
</div>
Vue.use(Vuetify);
var vm = new Vue({
data() {
return {
checkboxInOut: false,
checkboxAll: false,
sizeValue: null,
intensity:[
{in: void 0, out:void 0}],
cars: [
{
name: 'McQueen',
version: [
{color: 'blue' },
{color: 'red' },
{color: 'green' },
{color: 'purple' },
]
}
],
}
},
methods: {
}
})

Answer 1

Added fixes to the above code
working codepen here: https://codepen.io/chansv/pen/KKKvrom?editors=1010
<div id="app">
<v-app id="inspire">
<v-container fluid>
<h1>Selection</h1>
<div v-for="car in cars">
<v-select
label="Selection"
:items="car.version"
item-text="color"
>
</v-select>
<v-btn #click="addIntensity">
add intensity
</v-btn>
<br>
<br>
</v-text-field>
<div v-for="(int, index) in intensity">
index{{index}}
<v-btn #click="delIntensity(index)">
delete intensity
</v-btn>
<v-text-field
label="In"
type="number"
min="1"
max="100"
v-model="int.in">
</v-text-field>
<v-text-field
label="Out"
type="number"
min="1"
max="100"
v-model="int.out">
</v-text-field>
</div>
</div>
<v-checkbox label="Apply to All" v-model="checkboxAll"></v-checkbox>
<v-checkbox label="In = Out" v-model="checkboxInOut"></v-checkbox>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
checkboxInOut: false,
checkboxAll: false,
sizeValue: 0,
intensity:[
{in: 0, out: 0}],
cars: [
{
name: 'McQueen',
version: [
{color: 'blue' },
{color: 'red' },
{color: 'green' },
{color: 'purple' },
]
}
],
}),
methods: {
addIntensity() {
this.$set(this.intensity, this.intensity.length, {in: 0, out: 0});
},
delIntensity(index) {
this.intensity.splice(index, 1);
}
},
created() {
for(var i = 0; i <= val;i++){
this.$set(this.intensity, i, {in: 0, out: 0});
}
},
watch: {
checkboxInOut(val) {
if (val) {
this.intensity.forEach(x => {
x.out = x.in;
});
}
}
}
})