How to operate DOM in Vue.js
Here is the situation, I use v-for to display lots of data in JSON as seperate buttons. What I want to do is when i click single one of those buttons, the button's background color will change.
I want to use @click to bind function to each button, and in that function, do
as this
theButtonDOM.style.backgroundColor = 'black';
So, how can I get that DOM whose div element is generated by v-for?
OR any other solution to solve this 'background color change' problem?
javascript css vue.js
asked Nov 16 at 3:05
P1NK
94
add a comment |
Here is the situation, I use v-for to display lots of data in JSON as seperate buttons. What I want to do is when i click single one of those buttons, the button's background color will change.
I want to use @click to bind function to each button, and in that function, do
as this
theButtonDOM.style.backgroundColor = 'black';
So, how can I get that DOM whose div element is generated by v-for?
OR any other solution to solve this 'background color change' problem?
javascript css vue.js
asked Nov 16 at 3:05
P1NK
94
add a comment |
Here is the situation, I use v-for to display lots of data in JSON as seperate buttons. What I want to do is when i click single one of those buttons, the button's background color will change.
I want to use @click to bind function to each button, and in that function, do
as this
theButtonDOM.style.backgroundColor = 'black';
So, how can I get that DOM whose div element is generated by v-for?
OR any other solution to solve this 'background color change' problem?
javascript css vue.js
asked Nov 16 at 3:05
P1NK
94
Here is the situation, I use v-for to display lots of data in JSON as seperate buttons. What I want to do is when i click single one of those buttons, the button's background color will change.
I want to use @click to bind function to each button, and in that function, do
as this
theButtonDOM.style.backgroundColor = 'black';
So, how can I get that DOM whose div element is generated by v-for?
OR any other solution to solve this 'background color change' problem?
javascript css vue.js
javascript css vue.js
asked Nov 16 at 3:05
P1NK
94
asked Nov 16 at 3:05
P1NK
94
asked Nov 16 at 3:05
P1NK
94
asked Nov 16 at 3:05
P1NK
94
asked Nov 16 at 3:05
P1NK
94
94
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
Any time you trigger a click event in Vue template, you can access the event adding the special variable $event as parameter to the function.
<button @click="my_method($event, other parameter)"></button>
and then access the target of the event inside the method:
methods: {
my_method(event, other_paramethers) {
let button = event.target
}
}
Even just with bind the method to the @click event without any argument, you can access the event as your first parameter.
<button @click="my_method"></button>
...
methods: {
my_method($event) {
let button = $event.target
}
}
Then you can play with your button.
Look at this stackoverflow question and the Vue documentation for more details.
answered Nov 16 at 3:51
ArMo
412
Thank you, this is how it's done.
– P1NK
Nov 16 at 10:08
add a comment |
You can use @click and v-bind:class. When you click on an item, its index will be stored in selectedItem. Then v-bind:class automatically will add the class to the item that has an index equal to selectedItem.
new Vue({
el: '#app',
data: {
selectedItem: ""
},
computed:{},
methods: {}
}
).selectedItemClass {
background-color:green
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(item,index) in ['aa','bb','cc']"
v-bind:class="{ selectedItemClass : (selectedItem === index) }"
@click="selectedItem = index"
>{{item}}</div>
</div>answered Nov 16 at 3:18
eag845
868611
This is a cool way, I think.
– P1NK
Nov 16 at 10:09
add a comment |
You can pass $event
<button @click="changeColor($event)"></button>
Then in your method
this.changeColor = function(evt){ evt.target.style.backgroundColor = 'red'; }
answered Nov 16 at 3:08
Abana Clara
1,511819
Thanks a lot. This solution just works out fine.
– P1NK
Nov 16 at 10:07
add a comment |
I am assuming you want the buttons to act as individual switches and not a radio group, as implemented in the answer by @eag845.
You could add a 'clicked' boolean attribute to your JSON Objects.
arrayOfJSONObjects.forEach(object => object.clicked = false); // Add 'clicked' attribute and init to false
Then use that attribute as a conditional to bind a CSS class using v-bind:class or :class, and then toggle the attribute within @click or whatever event handler function you put inside @click.
<button
v-for="btn in arrayOfJSONObjects"
:class="{ 'button--activated': btn.clicked }"
@click="btn.clicked = !btn.clicked"
>{{btn.foo}}</button>
Stylez
.button {
background-color: white;
}
.button--activated {
background-color: black;
}
answered Nov 16 at 4:00
Jackson Ryan
163
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330836%2fhow-to-operate-dom-in-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Any time you trigger a click event in Vue template, you can access the event adding the special variable $event as parameter to the function.
<button @click="my_method($event, other parameter)"></button>
and then access the target of the event inside the method:
methods: {
my_method(event, other_paramethers) {
let button = event.target
}
}
Even just with bind the method to the @click event without any argument, you can access the event as your first parameter.
<button @click="my_method"></button>
...
methods: {
my_method($event) {
let button = $event.target
}
}
Then you can play with your button.
Look at this stackoverflow question and the Vue documentation for more details.
answered Nov 16 at 3:51
ArMo
412
Thank you, this is how it's done.
– P1NK
Nov 16 at 10:08
add a comment |
Any time you trigger a click event in Vue template, you can access the event adding the special variable $event as parameter to the function.
<button @click="my_method($event, other parameter)"></button>
and then access the target of the event inside the method:
methods: {
my_method(event, other_paramethers) {
let button = event.target
}
}
Even just with bind the method to the @click event without any argument, you can access the event as your first parameter.
<button @click="my_method"></button>
...
methods: {
my_method($event) {
let button = $event.target
}
}
Then you can play with your button.
Look at this stackoverflow question and the Vue documentation for more details.
answered Nov 16 at 3:51
ArMo
412
Thank you, this is how it's done.
– P1NK
Nov 16 at 10:08
add a comment |
Any time you trigger a click event in Vue template, you can access the event adding the special variable $event as parameter to the function.
<button @click="my_method($event, other parameter)"></button>
and then access the target of the event inside the method:
methods: {
my_method(event, other_paramethers) {
let button = event.target
}
}
Even just with bind the method to the @click event without any argument, you can access the event as your first parameter.
<button @click="my_method"></button>
...
methods: {
my_method($event) {
let button = $event.target
}
}
Then you can play with your button.
Look at this stackoverflow question and the Vue documentation for more details.
answered Nov 16 at 3:51
ArMo
412
Any time you trigger a click event in Vue template, you can access the event adding the special variable $event as parameter to the function.
<button @click="my_method($event, other parameter)"></button>
and then access the target of the event inside the method:
methods: {
my_method(event, other_paramethers) {
let button = event.target
}
}
Even just with bind the method to the @click event without any argument, you can access the event as your first parameter.
<button @click="my_method"></button>
...
methods: {
my_method($event) {
let button = $event.target
}
}
Then you can play with your button.
Look at this stackoverflow question and the Vue documentation for more details.
answered Nov 16 at 3:51
ArMo
412
answered Nov 16 at 3:51
ArMo
412
answered Nov 16 at 3:51
ArMo
412
answered Nov 16 at 3:51
ArMo
412
412
Thank you, this is how it's done.
– P1NK
Nov 16 at 10:08
add a comment |
Thank you, this is how it's done.
– P1NK
Nov 16 at 10:08
Thank you, this is how it's done.
– P1NK
Nov 16 at 10:08
Thank you, this is how it's done.
– P1NK
Nov 16 at 10:08
add a comment |
You can use @click and v-bind:class. When you click on an item, its index will be stored in selectedItem. Then v-bind:class automatically will add the class to the item that has an index equal to selectedItem.
new Vue({
el: '#app',
data: {
selectedItem: ""
},
computed:{},
methods: {}
}
).selectedItemClass {
background-color:green
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(item,index) in ['aa','bb','cc']"
v-bind:class="{ selectedItemClass : (selectedItem === index) }"
@click="selectedItem = index"
>{{item}}</div>
</div>answered Nov 16 at 3:18
eag845
868611
This is a cool way, I think.
– P1NK
Nov 16 at 10:09
add a comment |
You can use @click and v-bind:class. When you click on an item, its index will be stored in selectedItem. Then v-bind:class automatically will add the class to the item that has an index equal to selectedItem.
new Vue({
el: '#app',
data: {
selectedItem: ""
},
computed:{},
methods: {}
}
).selectedItemClass {
background-color:green
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(item,index) in ['aa','bb','cc']"
v-bind:class="{ selectedItemClass : (selectedItem === index) }"
@click="selectedItem = index"
>{{item}}</div>
</div>answered Nov 16 at 3:18
eag845
868611
This is a cool way, I think.
– P1NK
Nov 16 at 10:09
add a comment |
You can use @click and v-bind:class. When you click on an item, its index will be stored in selectedItem. Then v-bind:class automatically will add the class to the item that has an index equal to selectedItem.
new Vue({
el: '#app',
data: {
selectedItem: ""
},
computed:{},
methods: {}
}
).selectedItemClass {
background-color:green
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(item,index) in ['aa','bb','cc']"
v-bind:class="{ selectedItemClass : (selectedItem === index) }"
@click="selectedItem = index"
>{{item}}</div>
</div>answered Nov 16 at 3:18
eag845
868611
You can use @click and v-bind:class. When you click on an item, its index will be stored in selectedItem. Then v-bind:class automatically will add the class to the item that has an index equal to selectedItem.
new Vue({
el: '#app',
data: {
selectedItem: ""
},
computed:{},
methods: {}
}
).selectedItemClass {
background-color:green
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(item,index) in ['aa','bb','cc']"
v-bind:class="{ selectedItemClass : (selectedItem === index) }"
@click="selectedItem = index"
>{{item}}</div>
</div>new Vue({
el: '#app',
data: {
selectedItem: ""
},
computed:{},
methods: {}
}
).selectedItemClass {
background-color:green
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(item,index) in ['aa','bb','cc']"
v-bind:class="{ selectedItemClass : (selectedItem === index) }"
@click="selectedItem = index"
>{{item}}</div>
</div>new Vue({
el: '#app',
data: {
selectedItem: ""
},
computed:{},
methods: {}
}
).selectedItemClass {
background-color:green
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(item,index) in ['aa','bb','cc']"
v-bind:class="{ selectedItemClass : (selectedItem === index) }"
@click="selectedItem = index"
>{{item}}</div>
</div>answered Nov 16 at 3:18
eag845
868611
edited Nov 16 at 4:29
answered Nov 16 at 3:18
eag845
868611
answered Nov 16 at 3:18
eag845
868611
answered Nov 16 at 3:18
eag845
868611
868611
This is a cool way, I think.
– P1NK
Nov 16 at 10:09
add a comment |
This is a cool way, I think.
– P1NK
Nov 16 at 10:09
This is a cool way, I think.
– P1NK
Nov 16 at 10:09
This is a cool way, I think.
– P1NK
Nov 16 at 10:09
add a comment |
You can pass $event
<button @click="changeColor($event)"></button>
Then in your method
this.changeColor = function(evt){ evt.target.style.backgroundColor = 'red'; }
answered Nov 16 at 3:08
Abana Clara
1,511819
Thanks a lot. This solution just works out fine.
– P1NK
Nov 16 at 10:07
add a comment |
You can pass $event
<button @click="changeColor($event)"></button>
Then in your method
this.changeColor = function(evt){ evt.target.style.backgroundColor = 'red'; }
answered Nov 16 at 3:08
Abana Clara
1,511819
Thanks a lot. This solution just works out fine.
– P1NK
Nov 16 at 10:07
add a comment |
You can pass $event
<button @click="changeColor($event)"></button>
Then in your method
this.changeColor = function(evt){ evt.target.style.backgroundColor = 'red'; }
answered Nov 16 at 3:08
Abana Clara
1,511819
You can pass $event
<button @click="changeColor($event)"></button>
Then in your method
this.changeColor = function(evt){ evt.target.style.backgroundColor = 'red'; }
answered Nov 16 at 3:08
Abana Clara
1,511819
answered Nov 16 at 3:08
Abana Clara
1,511819
answered Nov 16 at 3:08
Abana Clara
1,511819
answered Nov 16 at 3:08
Abana Clara
1,511819
1,511819
Thanks a lot. This solution just works out fine.
– P1NK
Nov 16 at 10:07
add a comment |
Thanks a lot. This solution just works out fine.
– P1NK
Nov 16 at 10:07
Thanks a lot. This solution just works out fine.
– P1NK
Nov 16 at 10:07
Thanks a lot. This solution just works out fine.
– P1NK
Nov 16 at 10:07
add a comment |
I am assuming you want the buttons to act as individual switches and not a radio group, as implemented in the answer by @eag845.
You could add a 'clicked' boolean attribute to your JSON Objects.
arrayOfJSONObjects.forEach(object => object.clicked = false); // Add 'clicked' attribute and init to false
Then use that attribute as a conditional to bind a CSS class using v-bind:class or :class, and then toggle the attribute within @click or whatever event handler function you put inside @click.
<button
v-for="btn in arrayOfJSONObjects"
:class="{ 'button--activated': btn.clicked }"
@click="btn.clicked = !btn.clicked"
>{{btn.foo}}</button>
Stylez
.button {
background-color: white;
}
.button--activated {
background-color: black;
}
answered Nov 16 at 4:00
Jackson Ryan
163
add a comment |
I am assuming you want the buttons to act as individual switches and not a radio group, as implemented in the answer by @eag845.
You could add a 'clicked' boolean attribute to your JSON Objects.
arrayOfJSONObjects.forEach(object => object.clicked = false); // Add 'clicked' attribute and init to false
Then use that attribute as a conditional to bind a CSS class using v-bind:class or :class, and then toggle the attribute within @click or whatever event handler function you put inside @click.
<button
v-for="btn in arrayOfJSONObjects"
:class="{ 'button--activated': btn.clicked }"
@click="btn.clicked = !btn.clicked"
>{{btn.foo}}</button>
Stylez
.button {
background-color: white;
}
.button--activated {
background-color: black;
}
answered Nov 16 at 4:00
Jackson Ryan
163
add a comment |
I am assuming you want the buttons to act as individual switches and not a radio group, as implemented in the answer by @eag845.
You could add a 'clicked' boolean attribute to your JSON Objects.
arrayOfJSONObjects.forEach(object => object.clicked = false); // Add 'clicked' attribute and init to false
Then use that attribute as a conditional to bind a CSS class using v-bind:class or :class, and then toggle the attribute within @click or whatever event handler function you put inside @click.
<button
v-for="btn in arrayOfJSONObjects"
:class="{ 'button--activated': btn.clicked }"
@click="btn.clicked = !btn.clicked"
>{{btn.foo}}</button>
Stylez
.button {
background-color: white;
}
.button--activated {
background-color: black;
}
answered Nov 16 at 4:00
Jackson Ryan
163
I am assuming you want the buttons to act as individual switches and not a radio group, as implemented in the answer by @eag845.
You could add a 'clicked' boolean attribute to your JSON Objects.
arrayOfJSONObjects.forEach(object => object.clicked = false); // Add 'clicked' attribute and init to false
Then use that attribute as a conditional to bind a CSS class using v-bind:class or :class, and then toggle the attribute within @click or whatever event handler function you put inside @click.
<button
v-for="btn in arrayOfJSONObjects"
:class="{ 'button--activated': btn.clicked }"
@click="btn.clicked = !btn.clicked"
>{{btn.foo}}</button>
Stylez
.button {
background-color: white;
}
.button--activated {
background-color: black;
}
answered Nov 16 at 4:00
Jackson Ryan
163
edited Nov 16 at 4:36
answered Nov 16 at 4:00
Jackson Ryan
163
answered Nov 16 at 4:00
Jackson Ryan
163
answered Nov 16 at 4:00
Jackson Ryan
163
163
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330836%2fhow-to-operate-dom-in-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
