DOM fails to render property change in Vuejs
0
I am getting data with axios from an API , i manage to iterate with v-for through each property and i want @click to show the child properties ONLY of the CLICKED element.
//api gives
Subject_title: (...)
showChildren: false <-- This is added during the call with forEach
subject_id: (...)
subjects: (...)
And the rest is:
const vm = new Vue({
el: "#app",
data() {
return {
results: ,
}
},
methods: {
toggleChildren(i) {
this.results[i].showChildren =!this.results[i].showChildren;
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data.result;
this.results.forEach(sub => {
sub["showChildren"] = false
});
});
}
});
HTML:
<div class="subjects-single" v-for="(result,i) in results" :key="i">
<div @click="toggleChildren(i)" class="subjects-title">
<span class="accordion-title__text">
{{ result.Subject_title }} {{i}}
</span>
<ul v-if="results[i].showChildren">
<li v-for="subject in result.subjects">
{{ subject.Subject_title }} </li>
</ul>
</div>
api vuejs2
asked Jan 3 at 15:34
Gio10863315Gio10863315
11
add a comment |
0
I am getting data with axios from an API , i manage to iterate with v-for through each property and i want @click to show the child properties ONLY of the CLICKED element.
//api gives
Subject_title: (...)
showChildren: false <-- This is added during the call with forEach
subject_id: (...)
subjects: (...)
And the rest is:
const vm = new Vue({
el: "#app",
data() {
return {
results: ,
}
},
methods: {
toggleChildren(i) {
this.results[i].showChildren =!this.results[i].showChildren;
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data.result;
this.results.forEach(sub => {
sub["showChildren"] = false
});
});
}
});
HTML:
<div class="subjects-single" v-for="(result,i) in results" :key="i">
<div @click="toggleChildren(i)" class="subjects-title">
<span class="accordion-title__text">
{{ result.Subject_title }} {{i}}
</span>
<ul v-if="results[i].showChildren">
<li v-for="subject in result.subjects">
{{ subject.Subject_title }} </li>
</ul>
</div>
api vuejs2
asked Jan 3 at 15:34
Gio10863315Gio10863315
11
add a comment |
0
0
0
I am getting data with axios from an API , i manage to iterate with v-for through each property and i want @click to show the child properties ONLY of the CLICKED element.
//api gives
Subject_title: (...)
showChildren: false <-- This is added during the call with forEach
subject_id: (...)
subjects: (...)
And the rest is:
const vm = new Vue({
el: "#app",
data() {
return {
results: ,
}
},
methods: {
toggleChildren(i) {
this.results[i].showChildren =!this.results[i].showChildren;
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data.result;
this.results.forEach(sub => {
sub["showChildren"] = false
});
});
}
});
HTML:
<div class="subjects-single" v-for="(result,i) in results" :key="i">
<div @click="toggleChildren(i)" class="subjects-title">
<span class="accordion-title__text">
{{ result.Subject_title }} {{i}}
</span>
<ul v-if="results[i].showChildren">
<li v-for="subject in result.subjects">
{{ subject.Subject_title }} </li>
</ul>
</div>
api vuejs2
asked Jan 3 at 15:34
Gio10863315Gio10863315
11
I am getting data with axios from an API , i manage to iterate with v-for through each property and i want @click to show the child properties ONLY of the CLICKED element.
//api gives
Subject_title: (...)
showChildren: false <-- This is added during the call with forEach
subject_id: (...)
subjects: (...)
And the rest is:
const vm = new Vue({
el: "#app",
data() {
return {
results: ,
}
},
methods: {
toggleChildren(i) {
this.results[i].showChildren =!this.results[i].showChildren;
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data.result;
this.results.forEach(sub => {
sub["showChildren"] = false
});
});
}
});
HTML:
<div class="subjects-single" v-for="(result,i) in results" :key="i">
<div @click="toggleChildren(i)" class="subjects-title">
<span class="accordion-title__text">
{{ result.Subject_title }} {{i}}
</span>
<ul v-if="results[i].showChildren">
<li v-for="subject in result.subjects">
{{ subject.Subject_title }} </li>
</ul>
</div>
api vuejs2
api vuejs2
asked Jan 3 at 15:34
Gio10863315Gio10863315
11
asked Jan 3 at 15:34
Gio10863315Gio10863315
11
asked Jan 3 at 15:34
Gio10863315Gio10863315
11
asked Jan 3 at 15:34
Gio10863315Gio10863315
11
asked Jan 3 at 15:34
Gio10863315Gio10863315
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
The data is not ractive if you directly change an array item with the index, you must use Vue.set.
Vue.set(this.results, indexOfItem, newValue)
https://vuejs.org/v2/guide/list.html#Caveats
answered Jan 3 at 15:55
cwoodscwoods
111
Thanks for your input, i tried : Vue.set(this.results[i], this.results[i].showChildren, true ) but wasn't successful: results { 0: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 1: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 2: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) } how about: vm.results[i].showChildren = !vm.results[i].showChildren
– Gio10863315
Jan 4 at 8:12
Take a closer look at the method signature ofVue.set, you're using it wrong: vuejs.org/v2/api/#Vue-set
– TommyF
Jan 4 at 12:14
add a comment |
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
});
}
});
draft saved
draft discarded
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%2f54025351%2fdom-fails-to-render-property-change-in-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The data is not ractive if you directly change an array item with the index, you must use Vue.set.
Vue.set(this.results, indexOfItem, newValue)
https://vuejs.org/v2/guide/list.html#Caveats
answered Jan 3 at 15:55
cwoodscwoods
111
Thanks for your input, i tried : Vue.set(this.results[i], this.results[i].showChildren, true ) but wasn't successful: results { 0: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 1: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 2: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) } how about: vm.results[i].showChildren = !vm.results[i].showChildren
– Gio10863315
Jan 4 at 8:12
Take a closer look at the method signature ofVue.set, you're using it wrong: vuejs.org/v2/api/#Vue-set
– TommyF
Jan 4 at 12:14
add a comment |
0
The data is not ractive if you directly change an array item with the index, you must use Vue.set.
Vue.set(this.results, indexOfItem, newValue)
https://vuejs.org/v2/guide/list.html#Caveats
answered Jan 3 at 15:55
cwoodscwoods
111
Thanks for your input, i tried : Vue.set(this.results[i], this.results[i].showChildren, true ) but wasn't successful: results { 0: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 1: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 2: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) } how about: vm.results[i].showChildren = !vm.results[i].showChildren
– Gio10863315
Jan 4 at 8:12
Take a closer look at the method signature ofVue.set, you're using it wrong: vuejs.org/v2/api/#Vue-set
– TommyF
Jan 4 at 12:14
add a comment |
0
0
0
The data is not ractive if you directly change an array item with the index, you must use Vue.set.
Vue.set(this.results, indexOfItem, newValue)
https://vuejs.org/v2/guide/list.html#Caveats
answered Jan 3 at 15:55
cwoodscwoods
111
The data is not ractive if you directly change an array item with the index, you must use Vue.set.
Vue.set(this.results, indexOfItem, newValue)
https://vuejs.org/v2/guide/list.html#Caveats
answered Jan 3 at 15:55
cwoodscwoods
111
answered Jan 3 at 15:55
cwoodscwoods
111
answered Jan 3 at 15:55
cwoodscwoods
111
answered Jan 3 at 15:55
cwoodscwoods
111
111
Thanks for your input, i tried : Vue.set(this.results[i], this.results[i].showChildren, true ) but wasn't successful: results { 0: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 1: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 2: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) } how about: vm.results[i].showChildren = !vm.results[i].showChildren
– Gio10863315
Jan 4 at 8:12
Take a closer look at the method signature ofVue.set, you're using it wrong: vuejs.org/v2/api/#Vue-set
– TommyF
Jan 4 at 12:14
add a comment |
Thanks for your input, i tried : Vue.set(this.results[i], this.results[i].showChildren, true ) but wasn't successful: results { 0: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 1: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 2: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) } how about: vm.results[i].showChildren = !vm.results[i].showChildren
– Gio10863315
Jan 4 at 8:12
Take a closer look at the method signature ofVue.set, you're using it wrong: vuejs.org/v2/api/#Vue-set
– TommyF
Jan 4 at 12:14
Thanks for your input, i tried : Vue.set(this.results[i], this.results[i].showChildren, true ) but wasn't successful: results { 0: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 1: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 2: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) } how about: vm.results[i].showChildren = !vm.results[i].showChildren
– Gio10863315
Jan 4 at 8:12
Thanks for your input, i tried : Vue.set(this.results[i], this.results[i].showChildren, true ) but wasn't successful: results { 0: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 1: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) 2: Subject_title: (...) showChildren: false <-- subject_id: (...) subjects: (...) } how about: vm.results[i].showChildren = !vm.results[i].showChildren
– Gio10863315
Jan 4 at 8:12
Take a closer look at the method signature of
Vue.set, you're using it wrong: vuejs.org/v2/api/#Vue-set– TommyF
Jan 4 at 12:14
Take a closer look at the method signature of
Vue.set, you're using it wrong: vuejs.org/v2/api/#Vue-set– TommyF
Jan 4 at 12:14
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f54025351%2fdom-fails-to-render-property-change-in-vuejs%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
