How to add dynamically attribute in VueJs
Solution 1
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>
Solution 2
As pointed out, you don't need dynamic attributes in your case.
But well, you asked if it is possible, and the answer is yes. You can have dynamic attributes, as of 2.6.0.
Example:
<a v-bind:[attributeName]="whatever">
It is documented here
Solution 3
I am trying to figure out how to set the attribute of the html tags from the array value dynamically when using the Vue v-for loop.
What I am going to show:
- There are 3 div elements with different background colors from array value(not static).
-
Each divs have a input tag and change the value when the user input value
- The first div's input converts lowercase to uppercase.
- second represents the mood, if enter 'happy', present 'good'. if enter 'sad', output 'bad'
- The third div input doubles the input value.
new Vue({ el: "#app", data: { isRounded: false, boxes: [ { inputData: "", outputData: "", color: "green", operation: "uppercase" }, { inputData: "", outputData: "", color: "red", operation: "feeling" }, { inputData: "", outputData: "", color: "blue", operation: "multiple" } ], feeling: { good: ["happy", "joyful", "calm"], bad: ["sad", "mad", "depressed"] } }, methods: { toggle: function(todo){ todo.done = !todo.done } }, watch: { boxes: { deep: true, immediate: true, handler: function(val) { this.boxes.map(box => { if (box.operation === "uppercase") box.outputData = box.inputData.toUpperCase(); else if (box.operation === "feeling") { box.outputData = this.feeling.good.includes(box.inputData) ? "GOOD" : this.feeling.bad.includes(box.inputData) ? "BAD" : ""; } else if (box.operation === "multiple") { if (box.inputData == "") box.outputData = ""; else box.outputData = parseInt(box.inputData) * 2; } }); } } }, mounted() { for (var i = 0; i < this.numBox; i++) { this.boxValue[i] = ""; this.bxData[i] = ""; } }, }) .clearfix{ clear: both; } .full-width{ width:100%; } input { background: transparent; text-decoration: underline; color: white; border: none; text-align: center; font-size:30px; } .box { float:left; color: white; width: 24%; margin-right: 1%; padding: 20px; background: blue; height: 100px; } .box-output { width: 100%; text-align: center; font-size:30px; } .box-rounded { border-radius: 50px; }
Solution 4
base one condition we can define or change attributes in vue
Please refer official document for the same https://vuejs.org/v2/guide/syntax.html#Attributes
Maria Minh
Updated on July 05, 2022Comments
-
Maria Minh almost 2 years
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>
-
tno2007 almost 5 yearsplease add an example, not a link
-
Steffen T almost 5 yearsThere's a really good example behind the link, thanks for pointing there. I somehow missed it
-
benzo almost 4 yearsyou can add an attribute like v-for="(item, index) in numbers" :mycustom="item" , if there's an array [1,2,3,4]
-
lufc over 3 yearsNote in the latest version of Vue that placeholder would also need to be
:placeholder="placeholder"
-
jet_choong about 2 yearsThis's the answer I am looking for, thanks
-
Mises about 2 yearsNo, You didn't do that. Attributes of DOM elements are completely different thing than properties.
-
Cyebukayire about 2 yearsThat worked fine for me a while ago
-
Mises about 2 yearsOk, but title of this question is about attributes no properties. For example, on question: "What football player are the best in the wolrd?" You answered: "Justin Bieber.". Well he is not a football player.