Mixing
Vuejs multiple active buttons
I'm trying to create a list where every list item contains a button and i want a user to be able to click multiple button. I'm generating my list like so:
<ul>
<li v-for="item in items" :key="item.id">
<button type="button">{{item.title}}</button>
</li>
</ul>
but the problem with my code is whenever a user click a button, it turns the rest of the buttons to "unclicked". been trying to play with the focus and active stats but even with just css i cant get to enable multiple select .
i did manage to change the look of the current selected button:
button:focus {
outline: none;
background-color: #6acddf;
color: #fff;
}
any idea how can i allow multiple buttons to be clicked?
to make things a bit clearer, i am going to create an AJAX call later and pass the item.id of each item where it's button is clicked
vue.js
asked Jan 2 at 15:32
yariv baryariv bar
325217
add a comment |
I'm trying to create a list where every list item contains a button and i want a user to be able to click multiple button. I'm generating my list like so:
<ul>
<li v-for="item in items" :key="item.id">
<button type="button">{{item.title}}</button>
</li>
</ul>
but the problem with my code is whenever a user click a button, it turns the rest of the buttons to "unclicked". been trying to play with the focus and active stats but even with just css i cant get to enable multiple select .
i did manage to change the look of the current selected button:
button:focus {
outline: none;
background-color: #6acddf;
color: #fff;
}
any idea how can i allow multiple buttons to be clicked?
to make things a bit clearer, i am going to create an AJAX call later and pass the item.id of each item where it's button is clicked
vue.js
asked Jan 2 at 15:32
yariv baryariv bar
325217
2
Add another object to theitem, likeisClickedwhere isfalseby default. An then on your click method, likeclicked, set the value to true and append some class with some styles.
– Vucko
Jan 2 at 15:45
was hoping not to get this answer. i would much rather avoid changing the data structure if possible
– yariv bar
Jan 2 at 15:53
add a comment |
I'm trying to create a list where every list item contains a button and i want a user to be able to click multiple button. I'm generating my list like so:
<ul>
<li v-for="item in items" :key="item.id">
<button type="button">{{item.title}}</button>
</li>
</ul>
but the problem with my code is whenever a user click a button, it turns the rest of the buttons to "unclicked". been trying to play with the focus and active stats but even with just css i cant get to enable multiple select .
i did manage to change the look of the current selected button:
button:focus {
outline: none;
background-color: #6acddf;
color: #fff;
}
any idea how can i allow multiple buttons to be clicked?
to make things a bit clearer, i am going to create an AJAX call later and pass the item.id of each item where it's button is clicked
vue.js
asked Jan 2 at 15:32
yariv baryariv bar
325217
I'm trying to create a list where every list item contains a button and i want a user to be able to click multiple button. I'm generating my list like so:
<ul>
<li v-for="item in items" :key="item.id">
<button type="button">{{item.title}}</button>
</li>
</ul>
but the problem with my code is whenever a user click a button, it turns the rest of the buttons to "unclicked". been trying to play with the focus and active stats but even with just css i cant get to enable multiple select .
i did manage to change the look of the current selected button:
button:focus {
outline: none;
background-color: #6acddf;
color: #fff;
}
any idea how can i allow multiple buttons to be clicked?
to make things a bit clearer, i am going to create an AJAX call later and pass the item.id of each item where it's button is clicked
vue.js
vue.js
asked Jan 2 at 15:32
yariv baryariv bar
325217
asked Jan 2 at 15:32
yariv baryariv bar
325217
asked Jan 2 at 15:32
yariv baryariv bar
325217
asked Jan 2 at 15:32
yariv baryariv bar
325217
asked Jan 2 at 15:32
yariv baryariv bar
325217
325217
2
Add another object to theitem, likeisClickedwhere isfalseby default. An then on your click method, likeclicked, set the value to true and append some class with some styles.
– Vucko
Jan 2 at 15:45
was hoping not to get this answer. i would much rather avoid changing the data structure if possible
– yariv bar
Jan 2 at 15:53
add a comment |
2
Add another object to theitem, likeisClickedwhere isfalseby default. An then on your click method, likeclicked, set the value to true and append some class with some styles.
– Vucko
Jan 2 at 15:45
was hoping not to get this answer. i would much rather avoid changing the data structure if possible
– yariv bar
Jan 2 at 15:53
2
2
Add another object to the
item, like isClicked where is false by default. An then on your click method, like clicked, set the value to true and append some class with some styles.– Vucko
Jan 2 at 15:45
Add another object to the
item, like isClicked where is false by default. An then on your click method, like clicked, set the value to true and append some class with some styles.– Vucko
Jan 2 at 15:45
was hoping not to get this answer. i would much rather avoid changing the data structure if possible
– yariv bar
Jan 2 at 15:53
was hoping not to get this answer. i would much rather avoid changing the data structure if possible
– yariv bar
Jan 2 at 15:53
add a comment |
2 Answers
2
active
oldest
votes
I would much rather avoid changing the data structure if possible
Well you have to store somewhere that you clicked on the clicked item.
If you can't edit the items array then you can always create a new one, like isClicked where you store those values.
new Vue({
el: '#app',
data: {
items: [{
id: 1,
title: 'foo'
},
{
id: 2,
title: 'bar'
},
{
id: 3,
title: 'baz'
}
],
isClicked:
},
beforeMount() {
// set all values to false
this.items.forEach((item, index) => this.$set(this.isClicked, index, false))
},
methods: {
clicked(index) {
// toggle the active class
this.$set(this.isClicked, index, !this.isClicked[index])
}
}
}).active {
background: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<button @click="clicked(index)" :class="{'active': isClicked[index]}">{{item.title}}</button>
</div>
</div>Or you can use vuex for storing those values.
However you can just use Vues event to manipulate the classList property, like:
new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7]
}
}).active {
color: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-for="i in items" @click="e => e.target.classList.toggle('active')">{{ i }}</button>
</div>But it doesn't feel right, IMHO.
Also you can use cookies or localStorage to store those states. So it's really up to you.
answered Jan 3 at 7:56
VuckoVucko
15.5k54687
add a comment |
Use id attribute for list items to make it unique.
<ul>
<li v-for="item in items" :key="item.id" :id="item.id">
<button type="button" @click="doThis">{{item.title}}</button>
</li>
</ul>
new Vue({
el: '#app',
data: {},
methods: {
doThis() {
// Use this to access current object
}
}
});
answered Jan 2 at 15:58
MuthuMuthu
164
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%2f54009040%2fvuejs-multiple-active-buttons%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I would much rather avoid changing the data structure if possible
Well you have to store somewhere that you clicked on the clicked item.
If you can't edit the items array then you can always create a new one, like isClicked where you store those values.
new Vue({
el: '#app',
data: {
items: [{
id: 1,
title: 'foo'
},
{
id: 2,
title: 'bar'
},
{
id: 3,
title: 'baz'
}
],
isClicked:
},
beforeMount() {
// set all values to false
this.items.forEach((item, index) => this.$set(this.isClicked, index, false))
},
methods: {
clicked(index) {
// toggle the active class
this.$set(this.isClicked, index, !this.isClicked[index])
}
}
}).active {
background: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<button @click="clicked(index)" :class="{'active': isClicked[index]}">{{item.title}}</button>
</div>
</div>Or you can use vuex for storing those values.
However you can just use Vues event to manipulate the classList property, like:
new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7]
}
}).active {
color: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-for="i in items" @click="e => e.target.classList.toggle('active')">{{ i }}</button>
</div>But it doesn't feel right, IMHO.
Also you can use cookies or localStorage to store those states. So it's really up to you.
answered Jan 3 at 7:56
VuckoVucko
15.5k54687
add a comment |
I would much rather avoid changing the data structure if possible
Well you have to store somewhere that you clicked on the clicked item.
If you can't edit the items array then you can always create a new one, like isClicked where you store those values.
new Vue({
el: '#app',
data: {
items: [{
id: 1,
title: 'foo'
},
{
id: 2,
title: 'bar'
},
{
id: 3,
title: 'baz'
}
],
isClicked:
},
beforeMount() {
// set all values to false
this.items.forEach((item, index) => this.$set(this.isClicked, index, false))
},
methods: {
clicked(index) {
// toggle the active class
this.$set(this.isClicked, index, !this.isClicked[index])
}
}
}).active {
background: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<button @click="clicked(index)" :class="{'active': isClicked[index]}">{{item.title}}</button>
</div>
</div>Or you can use vuex for storing those values.
However you can just use Vues event to manipulate the classList property, like:
new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7]
}
}).active {
color: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-for="i in items" @click="e => e.target.classList.toggle('active')">{{ i }}</button>
</div>But it doesn't feel right, IMHO.
Also you can use cookies or localStorage to store those states. So it's really up to you.
answered Jan 3 at 7:56
VuckoVucko
15.5k54687
add a comment |
I would much rather avoid changing the data structure if possible
Well you have to store somewhere that you clicked on the clicked item.
If you can't edit the items array then you can always create a new one, like isClicked where you store those values.
new Vue({
el: '#app',
data: {
items: [{
id: 1,
title: 'foo'
},
{
id: 2,
title: 'bar'
},
{
id: 3,
title: 'baz'
}
],
isClicked:
},
beforeMount() {
// set all values to false
this.items.forEach((item, index) => this.$set(this.isClicked, index, false))
},
methods: {
clicked(index) {
// toggle the active class
this.$set(this.isClicked, index, !this.isClicked[index])
}
}
}).active {
background: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<button @click="clicked(index)" :class="{'active': isClicked[index]}">{{item.title}}</button>
</div>
</div>Or you can use vuex for storing those values.
However you can just use Vues event to manipulate the classList property, like:
new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7]
}
}).active {
color: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-for="i in items" @click="e => e.target.classList.toggle('active')">{{ i }}</button>
</div>But it doesn't feel right, IMHO.
Also you can use cookies or localStorage to store those states. So it's really up to you.
answered Jan 3 at 7:56
VuckoVucko
15.5k54687
I would much rather avoid changing the data structure if possible
Well you have to store somewhere that you clicked on the clicked item.
If you can't edit the items array then you can always create a new one, like isClicked where you store those values.
new Vue({
el: '#app',
data: {
items: [{
id: 1,
title: 'foo'
},
{
id: 2,
title: 'bar'
},
{
id: 3,
title: 'baz'
}
],
isClicked:
},
beforeMount() {
// set all values to false
this.items.forEach((item, index) => this.$set(this.isClicked, index, false))
},
methods: {
clicked(index) {
// toggle the active class
this.$set(this.isClicked, index, !this.isClicked[index])
}
}
}).active {
background: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<button @click="clicked(index)" :class="{'active': isClicked[index]}">{{item.title}}</button>
</div>
</div>Or you can use vuex for storing those values.
However you can just use Vues event to manipulate the classList property, like:
new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7]
}
}).active {
color: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-for="i in items" @click="e => e.target.classList.toggle('active')">{{ i }}</button>
</div>But it doesn't feel right, IMHO.
Also you can use cookies or localStorage to store those states. So it's really up to you.
new Vue({
el: '#app',
data: {
items: [{
id: 1,
title: 'foo'
},
{
id: 2,
title: 'bar'
},
{
id: 3,
title: 'baz'
}
],
isClicked:
},
beforeMount() {
// set all values to false
this.items.forEach((item, index) => this.$set(this.isClicked, index, false))
},
methods: {
clicked(index) {
// toggle the active class
this.$set(this.isClicked, index, !this.isClicked[index])
}
}
}).active {
background: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<button @click="clicked(index)" :class="{'active': isClicked[index]}">{{item.title}}</button>
</div>
</div>new Vue({
el: '#app',
data: {
items: [{
id: 1,
title: 'foo'
},
{
id: 2,
title: 'bar'
},
{
id: 3,
title: 'baz'
}
],
isClicked:
},
beforeMount() {
// set all values to false
this.items.forEach((item, index) => this.$set(this.isClicked, index, false))
},
methods: {
clicked(index) {
// toggle the active class
this.$set(this.isClicked, index, !this.isClicked[index])
}
}
}).active {
background: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<button @click="clicked(index)" :class="{'active': isClicked[index]}">{{item.title}}</button>
</div>
</div>new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7]
}
}).active {
color: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-for="i in items" @click="e => e.target.classList.toggle('active')">{{ i }}</button>
</div>new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7]
}
}).active {
color: red
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-for="i in items" @click="e => e.target.classList.toggle('active')">{{ i }}</button>
</div>answered Jan 3 at 7:56
VuckoVucko
15.5k54687
answered Jan 3 at 7:56
VuckoVucko
15.5k54687
answered Jan 3 at 7:56
VuckoVucko
15.5k54687
answered Jan 3 at 7:56
VuckoVucko
15.5k54687
15.5k54687
add a comment |
add a comment |
Use id attribute for list items to make it unique.
<ul>
<li v-for="item in items" :key="item.id" :id="item.id">
<button type="button" @click="doThis">{{item.title}}</button>
</li>
</ul>
new Vue({
el: '#app',
data: {},
methods: {
doThis() {
// Use this to access current object
}
}
});
answered Jan 2 at 15:58
MuthuMuthu
164
add a comment |
Use id attribute for list items to make it unique.
<ul>
<li v-for="item in items" :key="item.id" :id="item.id">
<button type="button" @click="doThis">{{item.title}}</button>
</li>
</ul>
new Vue({
el: '#app',
data: {},
methods: {
doThis() {
// Use this to access current object
}
}
});
answered Jan 2 at 15:58
MuthuMuthu
164
add a comment |
Use id attribute for list items to make it unique.
<ul>
<li v-for="item in items" :key="item.id" :id="item.id">
<button type="button" @click="doThis">{{item.title}}</button>
</li>
</ul>
new Vue({
el: '#app',
data: {},
methods: {
doThis() {
// Use this to access current object
}
}
});
answered Jan 2 at 15:58
MuthuMuthu
164
Use id attribute for list items to make it unique.
<ul>
<li v-for="item in items" :key="item.id" :id="item.id">
<button type="button" @click="doThis">{{item.title}}</button>
</li>
</ul>
new Vue({
el: '#app',
data: {},
methods: {
doThis() {
// Use this to access current object
}
}
});
answered Jan 2 at 15:58
MuthuMuthu
164
answered Jan 2 at 15:58
MuthuMuthu
164
answered Jan 2 at 15:58
MuthuMuthu
164
answered Jan 2 at 15:58
MuthuMuthu
164
164
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.
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%2f54009040%2fvuejs-multiple-active-buttons%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
2
Add another object to the
item, likeisClickedwhere isfalseby default. An then on your click method, likeclicked, set the value to true and append some class with some styles.– Vucko
Jan 2 at 15:45
was hoping not to get this answer. i would much rather avoid changing the data structure if possible
– yariv bar
Jan 2 at 15:53