How to create a dynamic class value in a component in VueJS?

Question

So I created a simple component:

Vue.component('m-textbox', {
  template: `
   <div>
    <div class="input-field col s12 m6 l6">
      <input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">
      <label :for="id">{{ label }}</label>
    </div>
   </div>
  `,
  props: ["id", "value", "label", "for"]
})

And I use it in my html like this:

<m-textbox v-model="full_name" id="full_name" label="Full Name"></m-textbox>

Now what I wanted to do is to make the columns settable. The default as you can see is col 12 m6 l6. Is there a way to make it dynamic? Like for example I can just do <m-textbox v-model="full_name" id="full_name" label="Full Name" classSize="col s12 m6"></m-textbox>.

Any help would be much appreciated.

Marek Urbanowicz · Accepted Answer · 2017-02-10 08:38:34Z

1

It should be really simple hopefully. Not sure if syntax is correct as I am using webpack and single file components, so sorry if some issue with syntax.

One way:

Vue.component('m-textbox', {
  template: 
   `<div>
    <div :class="size">
      <input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">
      <label :for="id">{{ label }}</label>
    </div>
   </div>`
  ,
  props: ["id", "value", "label", "for", 
           size: 
           { type: 'string', default: 'input-field col s12 m6 l6'}]
})

Other way:

Vue.component('m-textbox', {
  template: 
    `<div class="input-field">
      <input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">
      <label :for="id">{{ label }}</label>
    </div>`
  ,
      props: ["id", "value", "label", "for"]
    })

and use it: <m-textbox v-model="full_name" id="full_name" label="Full Name" v-bind:class="[col, s12, m6]"></m-textbox>

edited Feb 10, 2017 at 8:38

answered Feb 10, 2017 at 8:21

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wobsoriano Over a year ago

I get an invalid expression: :class="col s12 m6"

Marek Urbanowicz Over a year ago

fixed. you have to use v-bind and []

Marek Urbanowicz Over a year ago

accept answer than as correct to make it ok for other people finding it

smek · Accepted Answer · 2017-02-10 14:28:13Z

1

You could remove the outer div in your component template and simply add the class attribute to your component. It will even merge your classes.

Vue.component('m-textbox', {
  template: `
    <div class="input-field col">
      <input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">
      <label :for="id">{{ label }}</label>
    </div>
  `,
  props: ["id", "value", "label", "for"]
})

<m-textbox v-model="full_name" id="full_name" label="Full Name" class="s12 m6 l6"></m-textbox>

answered Feb 10, 2017 at 14:28

smek

1,6691 gold badge17 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to create a dynamic class value in a component in VueJS?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related