Как добавить динамический атрибут в VueJs

Question

Я использую vuejs, и я хочу знать, как иметь контроль над входами (при необходимости добавьте отключенный атрибут). Есть ли способ добавить динамический атрибут в vuejs? Ниже мой TextField компонента:

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

Использование:

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

Answer 1

Вы можете привязать его к переменной с помощью v-bind:disabled="foo" или :disabled="foo" для краткости:

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

Тогда в Vue вас может просто установить this.myVar = true, и он отключит вход.

Edit: добавьте в ваш шаблон:

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