vue - how do I add my prop value as a class value in the template?

Question

How do I add my value of the prop thrID as a class value in the template?

thrID is passed in as my1value

<template>
  <div v-bind:class="['hhhhh',thrID]">
    test {{thrID}}
  </div>
</template>

<script>


export default {
  name: 'bottom',
  components: {

  },
  props:["thrID"]
}
</script>

<style scoped>
  .bottom {
    background: yellow;
    height: 30px;
    width: 100%;
  }
</style>

it renders

<div data-v-10e356bb="" data-v-7ba5bd90="" class="hhhhh">
  test my1value
</div>

I want it to have a class like this

<div data-v-10e356bb="" data-v-7ba5bd90="" class="hhhhh my1value">
  test my1value
</div>

Your code works fine. See this fiddle.

Steven B.
– Steven B.

2019-04-10 19:19:45 +00:00
Commented Apr 10, 2019 at 19:19 — Steven B.
– Steven B., Commented Apr 10, 2019 at 19:19

Sumurai8 · Accepted Answer · 2019-04-10 19:05:34Z

You can easily add custom classes by binding a string, array or object to the class attribute. You start of by using the v-bind or : syntax to bind a variable to the class attribute:

<template>
  <div :class="classes">
    <!-- Magic! -->
  </div>
</template>

Then, in our export component we can do several things. The most versatile option is to use an object. If the value of a key is truthy, that class is applied. If the value is falsy, it will not be applied. We use the [ keyName ]: value syntax to add this.thrID as a key to our object.

export default {
  props: {
    thrID: {
      type: String,
      required: true
    }
  },
  computed: {
    classes () {
      return {
        hhhhh: true,
        [this.thrID]: true
      }
    }
  }
}

Similarly, you can return an array:

classes () {
  return [
    'hhhhh',
    this.thrID
  ]
}

Or you can create some string with classes:

classes () {
  return `hhhhh {$this.thrID}`
}

Collectives™ on Stack Overflow

vue - how do I add my prop value as a class value in the template?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related