VueJs v-bind:type on input element not working not working when using type as property name
Question
Code:
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"> <x :type="type"></x> </div> <script> Vue.component('x', { props : ['type'], template : '<input>' }); const x = new Vue({ el : '#app', data : { type : `password`, }, }) </script> </body> </html>
Why wont :type="type" work here in this scenario and create and element like so : <input type="password"> ?
4 answers
solution1
2 2019-08-01 03:28:22
You need to explicitly specify type prop on template:
Vue.component('x', {
props : ['type'],
template : '<input :type="type">'
});
solution2
2 ACCPTED 2019-08-01 03:33:42
Since you defined type as a prop, it won't be automatically applied to the root element. You need to bind it in your template:
Vue.component('x', {
props : ['type'],
template : '<input :type="type">'
});
Any parent scope attribute bindings that are not recognized as props will be applied to the root element automatically, so alternatively you can just remove the type prop and rely on this default behavior instead:
Vue.component('x', {
props : [],
template : '<input>'
});
solution3
0 2019-08-01 03:29:14
Try with:
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"> <x :type="type"></x> </div> <script> Vue.component('x', { props : ['type'], template : `<input :type="type">` }); const x = new Vue({ el : '#app', data : { type : `password`, }, }) </script> </body> </html>
solution4
0 2019-08-01 03:31:36
You passed the type prop but didn't bind in template. Try a bit the following code
Vue.component('x', { props : ['type'], template : '<input :type="type">' }); const x = new Vue({ el : '#app', data : { type : `password`, }, })
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"> <x :type="type"></x> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.