props: [ /* ... */ ],
data: () => ({
items: [];
}),
created () {
// Если кнопка большая
if (this.isBigButton) {
this.items = { subClass: 'title', item: this.tite, /*... */ }
} else {
this.items = { /* ... */ }
}
}<div v-for="item in items" :key="item.subClass" :class="`button__${item.subClass}`" /><ButtonComponent title="Kek" subtitle="Lol" size="big"></ButtonComponent><div class="button" :class="size || 'medium'">
<div v-if="title" class="button__title>{{title}}</div>
</div><style scoped>
.big {
height: 40px;
}
.medium {
height: 30px;
}
.small {
height:: 20px;
}
</style><template>
<div>
<input class="input" type="number" @input.number="hook($event, 'atack1')">
<input class="input" type="number" @input.number="hook($event, 'atack2')">
</div>
</template>
<script>
export default {
data: () => ({
atack1: '',
atack2: ''
}),
methods: {
updateNumber (num) {
let str = '' + num;
if (str.lenght > 3) str = str.slice(0,3);
return Number(str);
},
hook(e, variable) {
let num = e.target.value;
this[variable] = this.updateNumber(num);
}
},
watch: {
'atack1' () {
console.log('update atack1', this.atack1);
},
'atack2' () {
console.log('update atack2', this.atack2);
}
}
}
</script>watch : {
'atack' () {
if (('' + this.atack ).length > 3) {
let tmp = ('' + this.atack).slice(0,3)
this.atack = Number(tmp)
}
}
}