xxxxxxxxxx1
<template>2
<div class="hello">3
<mdb-input type="checkbox" id="checkbox1" name="checkbox1" v-model="checkboxValues[0]" label="checkbox1" />4
<mdb-input type="checkbox" id="checkbox2" name="checkbox2" v-model="checkboxValues[1]" label="checkbox2" />5
<mdb-input type="checkbox" id="checkbox3" name="checkbox3" v-model="checkboxValues[2]" label="checkbox3" />6
7
<button class="btn btn-primary btn-sm my-4" @click="countCheckedInputs">Count checked inputs</button>8
<p><strong>Number of checked inputs: {{ numberOfCheckedInputs }}</strong></p>9
</div>10
</template>xxxxxxxxxx1
<style>2
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");3
.hello {4
margin-top: 150px;5
text-align: center;6
}7
</style>xxxxxxxxxx1
<script>2
import { mdbInput } from "mdbvue";3
4
export default {5
name: "HelloWorld",6
components: {7
mdbInput8
},9
data() {10
return {11
checkboxValues: [false, true, false],12
numberOfCheckedInputs: 113
};14
},15
methods: {16
countCheckedInputs() {17
this.numberOfCheckedInputs = this.checkboxValues.filter((value) => value === true).length;18
}19
}20
};21
</script> Console errors: 0