[Vuejs]-VueJs v-bind:type on input element not working not working when using type as property name

by

2👍

✅

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>'
});
👤Decade Moon

2👍

You need to explicitly specify type prop on template:

Vue.component('x', {
     props    : ['type'],
     template : '<input :type="type">'
});
👤Bloops

0👍

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>
👤Christian Carrillo

0👍

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>
👤MH2K9

Leave a comment