Can we add more than one value in VueJs “type” attribute?

Question

I know this is such a ridiculous question, but could we add more than one value in 'type' property? Such as type="green rounded" or type="danger priority"

Answer 1

You can make a prop with a string type in your component, then use a method to check if the word is included in the string.

For example, prop:

props: {
  type: {
    type: String
  }

}

Create a function to check if the word is included:

propIncludes(segment) {
  return this.type.includes(segment);
}

Use the method wherever you want to check:

<p v-if="propIncludes('first')">First prop</p>
<p v-if="propIncludes('second')">Second prop</p>

And to add your new type to your component, simply go to the parent:

<Test type="first second"/>

I've added the sandbox below: https://codesandbox.io/s/heuristic-shamir-o0yk9

Answer 2

You can have one value for each property. For example type="green rounded" is still one value, it's up to you how you want to parse that value.

I created a quick demo that has type as a prop and splits it by a space.

 Vue.component("MyModal", { template: "<div>{{type? type.split(' ').join(', '): 'No Type'}}</div>", props: ["type"] }); new Vue({ el: "#app" });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <My-Modal type="danger red"></My-Modal> </div>