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 :
JavaScript
x
13
13
1
<template>
2
<input type="text" placeholder="{{ placeholder }}" v-model="value">
3
</template>
4
<script>
5
export default {
6
props: {
7
disabled: {type: Boolean, default: false},
8
placeholder: {type: String, default: ""},
9
value: {twoWay: true, default: ""}
10
}
11
}
12
</script>
13
Usage :
JavaScript
1
2
1
<textfield placeholder="Name" value.sync="el.name" :disabled="true"></textfield>
2
Advertisement
Answer
You can bind it to a variable using v-bind:disabled="foo"
or :disabled="foo"
for short:
JavaScript
1
2
1
<textfield label="Name" value.sync="el.name" :disabled="myVar">
2
Then in Vue you can just set this.myVar = true
and it will disable the input.
Edit: add this to your template:
JavaScript
1
4
1
<template>
2
<input type="text" :disabled="disabled" :placeholder="placeholder" v-model="value">
3
</template>
4