javascriptvue.jsdynamicvue-component

How to add an attribute dynamically in VueJs

I'm using vuejs and I wanna know how to have control on inputs (add disabled attribute when necessary). Is there any way to add dynamically attribute in vuejs ? Below my Textfield component : 

    <template>
     <input type="text" placeholder="{{ placeholder }}" v-model="value">
    </template>
    <script>
    export default  {
      props: {
       disabled: {type: Boolean, default: false},
       placeholder: {type: String, default: ""},
       value: {twoWay: true, default: ""}
      }
     }
    </script>

Usage :

<textfield placeholder="Name" value.sync="el.name" :disabled="true"></textfield>
Solution

  • You can bind it to a variable using v-bind:disabled="foo" or :disabled="foo" for short:

    <textfield label="Name" value.sync="el.name" :disabled="myVar">

    Then in Vue you can just set this.myVar = true and it will disable the input.

    Edit: add this to your template:

    <template>
  <input type="text" :disabled="disabled" :placeholder="placeholder" v-model="value">
</template>