Vue: bind dynamic and static classes

user_759235 0
Viewed 1333

A bit new to Vue so I am looking for a better way(if there's one) to set a default class without using the class attribute twice.

Component.vue

<template>
    <input class="form__control" :class="class" v-bind="$attrs"/>
<template>

<script>
  export default {
     props: ['class']
}
<script>

Usage

<component class="big-red" data-id="1" type="text"/>
vue.js
1 Answers

You can bind dynamic and static classes within a single property, using the array declaration:

 <template>
    <input :class="['form__control', class]" v-bind="$attrs"/>
<template>
user_46452910
Related