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/[email protected]/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">?

Decade Moon · Accepted Answer · 2019-08-01 03:33:42Z

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

answered Aug 1, 2019 at 3:33

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Over a year ago

Is it possible to bind once only in component or do I have to do it in component and root element?

Decade Moon Over a year ago

The point of props is it allows some data to be passed to a component and then that component can choose to do whatever it wants with that data, in your case you want to assign it to the type attribute on the root element. So it depends on what you want to do. Typically you always need to bind it twice, but in the second example in my answer you don't need to do anything in the child.

Potato Salad · Accepted Answer · 2019-08-01 03:30:07Z

2

You need to explicitly specify type prop on template:

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

edited Aug 1, 2019 at 3:30

Potato Salad

4,6603 gold badges22 silver badges33 bronze badges

answered Aug 1, 2019 at 3:28

Bloops

7731 gold badge11 silver badges15 bronze badges

Comments

Christian Carrillo · Accepted Answer · 2019-08-01 03:29:14Z

0

Try with:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

answered Aug 1, 2019 at 3:29

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

Comments

MH2K9 · Accepted Answer · 2019-08-01 03:31:36Z

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/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <x :type="type"></x>
</div>
</body>
</html>

answered Aug 1, 2019 at 3:31

MH2K9

12.1k7 gold badges34 silver badges49 bronze badges

2 Comments

Robert Over a year ago

I'm confused as to why i have to bind twice, once in Vue.component and again in <x :type="type">, can you please enlighten me?

MH2K9 Over a year ago

You are not binding twice. In <x :type="type"> you are just passing the type to x component (can consider a function call like x({type: 'type'})). In x component's template you are binding <input :type="type">. For more see vuejs.org/v2/guide/components-props.html

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related