- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add multiple data types for props in Vue.js?
The javascript attribute names are case insensitive, so browsers are made in a way to interpret any uppercase characters to lowercase. This means, while using the DOM elements, camel Cased props names need to use their kebab-based (hyphen-delimited) equivalents.
So let’s say that you are not sure of the type of value you might receive from the props in Vue.js. Usually, you will want every prop to have a specific type of value. But in a case when you want a prop to have a list of value types, you can use the following syntax to apply the same.
props: {
value: [Number, String, Array]
}
To understand this better, please look at the below example
Example
Create two files app.js and index.html in your Vue project. The file and directory with code snippets are given below for both files. Copy and paste the below code snipped in your Vue project and run the Vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// Possible value of props is String & Number
Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('test-component', {
name: 'TestComponent',
props: {
username: {
type: [ String, Number ]
}
},
template: `<div>username: {{ username }}</div>`
});
new Vue({ el: '#app' });
FileName - index.html
Directory Structure -- $project/public -- index.html
<!DOCTYPE javascript>
<javascript>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- value type: String -->
<test-component :username="'user 38'"></test-component>
<!-- value type: Number -->
<test-component :username="59"></test-component>
<!-- value type: null is valid, it is not required -->
<test-component :username="null"></test-component>
<!-- value type: missing property is valid, it is not required -->
<test-component></test-component>
<!-- invalid: Array -->
<test-component :username="['test', 456]"></test-component>
</div>
<script src='app.js'></script>
</body>
</javascript>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Example
Let’s combine the above two files- app.js and index.html into one javascript file
<!DOCTYPE javascript>
<javascript>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- value type: String -->
<test-component :username="'user 38'"></test-component>
<!-- value type: Number -->
<test-component :username="59"></test-component>
<!-- value type: null is valid, it is not required -->
<test-component :username="null"></test-component>
<!-- value type: missing property is valid, it is not required -->
<test-component></test-component>
<!-- invalid: Array -->
<test-component :username="['test', 456]"></test-component>
</div>
<script>
// Possible value of props is String & Number
Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('test-component', {
name: 'TestComponent',
props: {
username: {
type: [ String, Number ]
}
},
template: `<div>username: {{ username }}</div>`
});
new Vue({ el: '#app' });
</script>
</body>
</javascript>
In this tutorial, we learned how to add multiple data types for props in Vue.js. We have defined two files app.js and index.htmlin our Vue project. Finally, we combined these two files to create one single javascript file to make it possible to run as an html/ JavaScritp file.
413 Views
