Mixing
Vuejs build checkbox dynamically from array
I´m trying to build and checkbox from the setCheckbox method. The idea is to set dynamically the names to build the checkbox array.
<div id='example-3'>
<div v-for="(item, index) in names" :key="index">
<input type="checkbox" :id="item.name" v-model="item.checked">
<label :for="item.name">{{ item.name }}</label>
</div>
<span>Checked names: {{ checkedNames }}</span>
</div>
I removed the names array that supported the checkbox, in order to pass dynamically the new values.
new Vue({
el: '#example-3',
data() {
return {
names:
/* Below is how the names should receive the array to support the checkbox
[
{
name: '',
checked: false
}, {
name: '',
checked: false
}, {
name: '',
checked: false
}
]
*/
}
},
method: {
setCheckbox: function() {
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = value.match(regExp);
var arrCheckbox = ;
for (var i = 0; i < matches.length; i++) {
var str = matches[i];
arrCheckbox.push(str);
// set the names in the array
const names = arrCheckbox
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
})
Basically trying to pass array to names dynamically, method sets values require to build names.
https://jsfiddle.net/bernlt/aj6apozq/114/
javascript vue.js
edited Nov 19 '18 at 20:00
ssc-hrep3
5,18831553
asked Nov 19 '18 at 18:59
bernltbernlt
1916
add a comment |
I´m trying to build and checkbox from the setCheckbox method. The idea is to set dynamically the names to build the checkbox array.
<div id='example-3'>
<div v-for="(item, index) in names" :key="index">
<input type="checkbox" :id="item.name" v-model="item.checked">
<label :for="item.name">{{ item.name }}</label>
</div>
<span>Checked names: {{ checkedNames }}</span>
</div>
I removed the names array that supported the checkbox, in order to pass dynamically the new values.
new Vue({
el: '#example-3',
data() {
return {
names:
/* Below is how the names should receive the array to support the checkbox
[
{
name: '',
checked: false
}, {
name: '',
checked: false
}, {
name: '',
checked: false
}
]
*/
}
},
method: {
setCheckbox: function() {
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = value.match(regExp);
var arrCheckbox = ;
for (var i = 0; i < matches.length; i++) {
var str = matches[i];
arrCheckbox.push(str);
// set the names in the array
const names = arrCheckbox
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
})
Basically trying to pass array to names dynamically, method sets values require to build names.
https://jsfiddle.net/bernlt/aj6apozq/114/
javascript vue.js
edited Nov 19 '18 at 20:00
ssc-hrep3
5,18831553
asked Nov 19 '18 at 18:59
bernltbernlt
1916
add a comment |
I´m trying to build and checkbox from the setCheckbox method. The idea is to set dynamically the names to build the checkbox array.
<div id='example-3'>
<div v-for="(item, index) in names" :key="index">
<input type="checkbox" :id="item.name" v-model="item.checked">
<label :for="item.name">{{ item.name }}</label>
</div>
<span>Checked names: {{ checkedNames }}</span>
</div>
I removed the names array that supported the checkbox, in order to pass dynamically the new values.
new Vue({
el: '#example-3',
data() {
return {
names:
/* Below is how the names should receive the array to support the checkbox
[
{
name: '',
checked: false
}, {
name: '',
checked: false
}, {
name: '',
checked: false
}
]
*/
}
},
method: {
setCheckbox: function() {
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = value.match(regExp);
var arrCheckbox = ;
for (var i = 0; i < matches.length; i++) {
var str = matches[i];
arrCheckbox.push(str);
// set the names in the array
const names = arrCheckbox
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
})
Basically trying to pass array to names dynamically, method sets values require to build names.
https://jsfiddle.net/bernlt/aj6apozq/114/
javascript vue.js
edited Nov 19 '18 at 20:00
ssc-hrep3
5,18831553
asked Nov 19 '18 at 18:59
bernltbernlt
1916
I´m trying to build and checkbox from the setCheckbox method. The idea is to set dynamically the names to build the checkbox array.
<div id='example-3'>
<div v-for="(item, index) in names" :key="index">
<input type="checkbox" :id="item.name" v-model="item.checked">
<label :for="item.name">{{ item.name }}</label>
</div>
<span>Checked names: {{ checkedNames }}</span>
</div>
I removed the names array that supported the checkbox, in order to pass dynamically the new values.
new Vue({
el: '#example-3',
data() {
return {
names:
/* Below is how the names should receive the array to support the checkbox
[
{
name: '',
checked: false
}, {
name: '',
checked: false
}, {
name: '',
checked: false
}
]
*/
}
},
method: {
setCheckbox: function() {
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = value.match(regExp);
var arrCheckbox = ;
for (var i = 0; i < matches.length; i++) {
var str = matches[i];
arrCheckbox.push(str);
// set the names in the array
const names = arrCheckbox
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
})
Basically trying to pass array to names dynamically, method sets values require to build names.
https://jsfiddle.net/bernlt/aj6apozq/114/
javascript vue.js
javascript vue.js
edited Nov 19 '18 at 20:00
ssc-hrep3
5,18831553
asked Nov 19 '18 at 18:59
bernltbernlt
1916
edited Nov 19 '18 at 20:00
ssc-hrep3
5,18831553
asked Nov 19 '18 at 18:59
bernltbernlt
1916
edited Nov 19 '18 at 20:00
ssc-hrep3
5,18831553
edited Nov 19 '18 at 20:00
ssc-hrep3
5,18831553
edited Nov 19 '18 at 20:00
ssc-hrep3
5,18831553
5,18831553
asked Nov 19 '18 at 18:59
bernltbernlt
1916
asked Nov 19 '18 at 18:59
bernltbernlt
1916
asked Nov 19 '18 at 18:59
bernltbernlt
1916
1916
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You have several things you need to correct.
You called the methods attribute
method.You don't call the
setCheckbox()while initializing the component. You need to do this in eithercreated()ormounted(). If you want to dynamically watch the example string, you would also have to watch this string and the reset thenamesarray.You don't save the names effectively. You just create a constant with the name
namesbut you must assign it to the vue component (this).You pushed a string into the array (the name), but you actually wanted to push an object containing a string and a boolean.
You could improve your code, if you split the logic of the loop and extracting the string from the checkbox view. You can do this by creating a component for the checkbox which is looped over multiple times. Then, you'd have a single state in a checkbox component with a name and a boolean.
The first four things should be fixed now in this snippet (I did not run it):
<div id='example-3'>
<div v-for="(item, index) in names" :key="index">
<input type="checkbox" :id="item.name" v-model="item.checked">
<label :for="item.name">{{ item.name }}</label>
</div>
<span>Checked names: {{ checkedNames }}</span>
</div>
I removed the names array that supported the checkbox, in order to pass dynamically the new values.
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox() {
this.names = ;
// you might want to extract this string and recall this function after it changes
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = value.match(regExp);
for (var i = 0; i < matches.length; i++) {
this.names.push({
name: matches[i],
checked: false
});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
created() {
this.setCheckbox();
}
})
answered Nov 19 '18 at 20:17
ssc-hrep3ssc-hrep3
5,18831553
add a comment |
Several issues.
- you're not calling setCheckbox()
- several errors.
Here's something closer to what you're looking for:
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox: function() {
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = txt.match(regExp);
var arrCheckbox = ;
console.log(matches);
for (var i = 0; i < matches.length; i++) {
var str = matches[i].replace(/{(.*)}/, '$1');
this.names.push({name: str, checked: false});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
mounted() {
this.setCheckbox();
}
})
Here's a working fiddle: https://jsfiddle.net/jmbldwn/3Lrbw56s/8/
answered Nov 19 '18 at 20:20
Jim B.Jim B.
2,6661929
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%2f53381014%2fvuejs-build-checkbox-dynamically-from-array%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
You have several things you need to correct.
You called the methods attribute
method.You don't call the
setCheckbox()while initializing the component. You need to do this in eithercreated()ormounted(). If you want to dynamically watch the example string, you would also have to watch this string and the reset thenamesarray.You don't save the names effectively. You just create a constant with the name
namesbut you must assign it to the vue component (this).You pushed a string into the array (the name), but you actually wanted to push an object containing a string and a boolean.
You could improve your code, if you split the logic of the loop and extracting the string from the checkbox view. You can do this by creating a component for the checkbox which is looped over multiple times. Then, you'd have a single state in a checkbox component with a name and a boolean.
The first four things should be fixed now in this snippet (I did not run it):
<div id='example-3'>
<div v-for="(item, index) in names" :key="index">
<input type="checkbox" :id="item.name" v-model="item.checked">
<label :for="item.name">{{ item.name }}</label>
</div>
<span>Checked names: {{ checkedNames }}</span>
</div>
I removed the names array that supported the checkbox, in order to pass dynamically the new values.
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox() {
this.names = ;
// you might want to extract this string and recall this function after it changes
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = value.match(regExp);
for (var i = 0; i < matches.length; i++) {
this.names.push({
name: matches[i],
checked: false
});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
created() {
this.setCheckbox();
}
})
answered Nov 19 '18 at 20:17
ssc-hrep3ssc-hrep3
5,18831553
add a comment |
You have several things you need to correct.
You called the methods attribute
method.You don't call the
setCheckbox()while initializing the component. You need to do this in eithercreated()ormounted(). If you want to dynamically watch the example string, you would also have to watch this string and the reset thenamesarray.You don't save the names effectively. You just create a constant with the name
namesbut you must assign it to the vue component (this).You pushed a string into the array (the name), but you actually wanted to push an object containing a string and a boolean.
You could improve your code, if you split the logic of the loop and extracting the string from the checkbox view. You can do this by creating a component for the checkbox which is looped over multiple times. Then, you'd have a single state in a checkbox component with a name and a boolean.
The first four things should be fixed now in this snippet (I did not run it):
<div id='example-3'>
<div v-for="(item, index) in names" :key="index">
<input type="checkbox" :id="item.name" v-model="item.checked">
<label :for="item.name">{{ item.name }}</label>
</div>
<span>Checked names: {{ checkedNames }}</span>
</div>
I removed the names array that supported the checkbox, in order to pass dynamically the new values.
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox() {
this.names = ;
// you might want to extract this string and recall this function after it changes
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = value.match(regExp);
for (var i = 0; i < matches.length; i++) {
this.names.push({
name: matches[i],
checked: false
});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
created() {
this.setCheckbox();
}
})
answered Nov 19 '18 at 20:17
ssc-hrep3ssc-hrep3
5,18831553
add a comment |
You have several things you need to correct.
You called the methods attribute
method.You don't call the
setCheckbox()while initializing the component. You need to do this in eithercreated()ormounted(). If you want to dynamically watch the example string, you would also have to watch this string and the reset thenamesarray.You don't save the names effectively. You just create a constant with the name
namesbut you must assign it to the vue component (this).You pushed a string into the array (the name), but you actually wanted to push an object containing a string and a boolean.
You could improve your code, if you split the logic of the loop and extracting the string from the checkbox view. You can do this by creating a component for the checkbox which is looped over multiple times. Then, you'd have a single state in a checkbox component with a name and a boolean.
The first four things should be fixed now in this snippet (I did not run it):
<div id='example-3'>
<div v-for="(item, index) in names" :key="index">
<input type="checkbox" :id="item.name" v-model="item.checked">
<label :for="item.name">{{ item.name }}</label>
</div>
<span>Checked names: {{ checkedNames }}</span>
</div>
I removed the names array that supported the checkbox, in order to pass dynamically the new values.
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox() {
this.names = ;
// you might want to extract this string and recall this function after it changes
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = value.match(regExp);
for (var i = 0; i < matches.length; i++) {
this.names.push({
name: matches[i],
checked: false
});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
created() {
this.setCheckbox();
}
})
answered Nov 19 '18 at 20:17
ssc-hrep3ssc-hrep3
5,18831553
You have several things you need to correct.
You called the methods attribute
method.You don't call the
setCheckbox()while initializing the component. You need to do this in eithercreated()ormounted(). If you want to dynamically watch the example string, you would also have to watch this string and the reset thenamesarray.You don't save the names effectively. You just create a constant with the name
namesbut you must assign it to the vue component (this).You pushed a string into the array (the name), but you actually wanted to push an object containing a string and a boolean.
You could improve your code, if you split the logic of the loop and extracting the string from the checkbox view. You can do this by creating a component for the checkbox which is looped over multiple times. Then, you'd have a single state in a checkbox component with a name and a boolean.
The first four things should be fixed now in this snippet (I did not run it):
<div id='example-3'>
<div v-for="(item, index) in names" :key="index">
<input type="checkbox" :id="item.name" v-model="item.checked">
<label :for="item.name">{{ item.name }}</label>
</div>
<span>Checked names: {{ checkedNames }}</span>
</div>
I removed the names array that supported the checkbox, in order to pass dynamically the new values.
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox() {
this.names = ;
// you might want to extract this string and recall this function after it changes
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = value.match(regExp);
for (var i = 0; i < matches.length; i++) {
this.names.push({
name: matches[i],
checked: false
});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
created() {
this.setCheckbox();
}
})
answered Nov 19 '18 at 20:17
ssc-hrep3ssc-hrep3
5,18831553
answered Nov 19 '18 at 20:17
ssc-hrep3ssc-hrep3
5,18831553
answered Nov 19 '18 at 20:17
ssc-hrep3ssc-hrep3
5,18831553
answered Nov 19 '18 at 20:17
ssc-hrep3ssc-hrep3
5,18831553
5,18831553
add a comment |
add a comment |
Several issues.
- you're not calling setCheckbox()
- several errors.
Here's something closer to what you're looking for:
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox: function() {
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = txt.match(regExp);
var arrCheckbox = ;
console.log(matches);
for (var i = 0; i < matches.length; i++) {
var str = matches[i].replace(/{(.*)}/, '$1');
this.names.push({name: str, checked: false});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
mounted() {
this.setCheckbox();
}
})
Here's a working fiddle: https://jsfiddle.net/jmbldwn/3Lrbw56s/8/
answered Nov 19 '18 at 20:20
Jim B.Jim B.
2,6661929
add a comment |
Several issues.
- you're not calling setCheckbox()
- several errors.
Here's something closer to what you're looking for:
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox: function() {
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = txt.match(regExp);
var arrCheckbox = ;
console.log(matches);
for (var i = 0; i < matches.length; i++) {
var str = matches[i].replace(/{(.*)}/, '$1');
this.names.push({name: str, checked: false});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
mounted() {
this.setCheckbox();
}
})
Here's a working fiddle: https://jsfiddle.net/jmbldwn/3Lrbw56s/8/
answered Nov 19 '18 at 20:20
Jim B.Jim B.
2,6661929
add a comment |
Several issues.
- you're not calling setCheckbox()
- several errors.
Here's something closer to what you're looking for:
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox: function() {
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = txt.match(regExp);
var arrCheckbox = ;
console.log(matches);
for (var i = 0; i < matches.length; i++) {
var str = matches[i].replace(/{(.*)}/, '$1');
this.names.push({name: str, checked: false});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
mounted() {
this.setCheckbox();
}
})
Here's a working fiddle: https://jsfiddle.net/jmbldwn/3Lrbw56s/8/
answered Nov 19 '18 at 20:20
Jim B.Jim B.
2,6661929
Several issues.
- you're not calling setCheckbox()
- several errors.
Here's something closer to what you're looking for:
new Vue({
el: '#example-3',
data() {
return {
names:
}
},
methods: {
setCheckbox: function() {
var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."
var regExp = /{([^}]*)}/g;
var matches = txt.match(regExp);
var arrCheckbox = ;
console.log(matches);
for (var i = 0; i < matches.length; i++) {
var str = matches[i].replace(/{(.*)}/, '$1');
this.names.push({name: str, checked: false});
}
}
},
computed: {
checkedNames() {
return this.names.filter(item => item.checked).map(name => name.name)
}
},
mounted() {
this.setCheckbox();
}
})
Here's a working fiddle: https://jsfiddle.net/jmbldwn/3Lrbw56s/8/
answered Nov 19 '18 at 20:20
Jim B.Jim B.
2,6661929
answered Nov 19 '18 at 20:20
Jim B.Jim B.
2,6661929
answered Nov 19 '18 at 20:20
Jim B.Jim B.
2,6661929
answered Nov 19 '18 at 20:20
Jim B.Jim B.
2,6661929
2,6661929
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%2f53381014%2fvuejs-build-checkbox-dynamically-from-array%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
