Component transition variable template

Question

I am trying to create a Vue.js component that exists for some input fields. This means that the component template must accept a name for the inputs.

Say I have a template:

<template>
  <input type="text" name="VARIABLE">
</template>

and I call this component with

<component-input></component-input>

How does my component input determine the value of VARIABLE?

Answer 1

You can do it as follows:

Vue.component('input-component', {
  template: '<input type="text" :name="inputName">',
  props: {
   inputName: String   
  }
})

<input-component input-name="someName"></input-component>

Run code

The question for your question is to use props. Hope to help you.

Answer 2

I understood:

<template>
  <input type="text" name="{{name}}">
</template>

-

<component-input name="demo"></component-input>

-

var component = Vue.extend({
  props: {
    name: {
      type: String
    }
  }
});