Vue.js DOM not updating (integrating a Symfony form with dynamic content)
I made a dynamic vue component that loads a whole form generated backend with Symfony/Twig. This works fine with simple forms.
Now, I'm trying to make it work with dynamic fields (let say country/city) : when you choose a country in one of the form's input an ajax call update the choices in the cities' input.
I'm stuck on the very last step. I get my updated field's html, I replace the cities input with this new object, but the change doesn't show up in the DOM.
Below's my component's code. In the initializeDynamicFields() method (at the bottom of the code), upon success of an ajax call, I make the replacement that does not update the DOM as I hope it would. dynamicFieldParent and dynamicFieldChild are the ids of the form's dynamic fields.
I'm calling this method in both mounted() and updated().
EDIT Problem solved : I was calling a component's prop inside the ajax callback instead of storing its a content into a variable beforehand.
<template>
<div class="card bg-light border-dark">
<div class="card-body">
<h3 v-if="title" class="card-title">{{ title }}</h3>
<div v-html="content" v-on:click.capture="handleClick"></div>
<!--<div ref="body" v-on:click.capture="handleClick"></div>-->
</div>
</div>
</template>
<script type="text/babel">
var formSerialize = require('form-serialize');
export default {
name: "dynamic-form",
props: ['url', 'dynamicFieldParent', 'dynamicFieldChild'],
data() {
return {
title: '',
content: '',
components: null
};
},
created() {
this.load(this.url);
},
mounted() {
if (this.dynamicFieldParent) {
this.initializeDynamicFields();
}
},
updated() {
if (this.dynamicFieldParent) {
this.initializeDynamicFields();
}
},
methods: {
load(url) {
axios.get(url, {
headers: {'X-Requested-With': 'XMLHttpRequest'}
}).then(response => {
this.title = response.data.title;
this.content = response.data.content;
this.components = response.data.components;
});
},
handleClick(e) {
if (e.target.tagName == 'BUTTON' && e.target.type == 'submit' && e.target.form.checkValidity()) {
this.submit(e);
}
},
submit(e) {
e.preventDefault();
this.$root.$emit('form-sending');
let data = formSerialize(e.target.form, {
hash: false, empty: true
});
data += '&' + e.target.name + '='
+ encodeURIComponent(e.target.value);
axios.post(this.url, data, {
headers: {'X-Requested-With': 'XMLHttpRequest'}
}).then(response => {
this.title = response.data.title;
this.content = response.data.content;
this.components = response.data.components;
if (response.status == 201) {
this.$root.$emit('form-success');
}
});
},
initializeDynamicFields() {
var $parent = $('#' + this.dynamicFieldParent);
var $child = $('#' + this.dynamicFieldChild);
$parent.change(function() {
var $form = $parent.closest('form');
var formData = new FormData();
formData.set($parent.attr('name'), $parent.val());
axios.post($form.attr('action'), formData).then(response => {
$child.replaceWith(
response.data.content.find('#' + this.dynamicFieldChild)
);
});
});
}
}
}
</script>
jquery vue.js
asked Nov 14 '18 at 2:45
Roubi
942826
add a comment |
I made a dynamic vue component that loads a whole form generated backend with Symfony/Twig. This works fine with simple forms.
Now, I'm trying to make it work with dynamic fields (let say country/city) : when you choose a country in one of the form's input an ajax call update the choices in the cities' input.
I'm stuck on the very last step. I get my updated field's html, I replace the cities input with this new object, but the change doesn't show up in the DOM.
Below's my component's code. In the initializeDynamicFields() method (at the bottom of the code), upon success of an ajax call, I make the replacement that does not update the DOM as I hope it would. dynamicFieldParent and dynamicFieldChild are the ids of the form's dynamic fields.
I'm calling this method in both mounted() and updated().
EDIT Problem solved : I was calling a component's prop inside the ajax callback instead of storing its a content into a variable beforehand.
<template>
<div class="card bg-light border-dark">
<div class="card-body">
<h3 v-if="title" class="card-title">{{ title }}</h3>
<div v-html="content" v-on:click.capture="handleClick"></div>
<!--<div ref="body" v-on:click.capture="handleClick"></div>-->
</div>
</div>
</template>
<script type="text/babel">
var formSerialize = require('form-serialize');
export default {
name: "dynamic-form",
props: ['url', 'dynamicFieldParent', 'dynamicFieldChild'],
data() {
return {
title: '',
content: '',
components: null
};
},
created() {
this.load(this.url);
},
mounted() {
if (this.dynamicFieldParent) {
this.initializeDynamicFields();
}
},
updated() {
if (this.dynamicFieldParent) {
this.initializeDynamicFields();
}
},
methods: {
load(url) {
axios.get(url, {
headers: {'X-Requested-With': 'XMLHttpRequest'}
}).then(response => {
this.title = response.data.title;
this.content = response.data.content;
this.components = response.data.components;
});
},
handleClick(e) {
if (e.target.tagName == 'BUTTON' && e.target.type == 'submit' && e.target.form.checkValidity()) {
this.submit(e);
}
},
submit(e) {
e.preventDefault();
this.$root.$emit('form-sending');
let data = formSerialize(e.target.form, {
hash: false, empty: true
});
data += '&' + e.target.name + '='
+ encodeURIComponent(e.target.value);
axios.post(this.url, data, {
headers: {'X-Requested-With': 'XMLHttpRequest'}
}).then(response => {
this.title = response.data.title;
this.content = response.data.content;
this.components = response.data.components;
if (response.status == 201) {
this.$root.$emit('form-success');
}
});
},
initializeDynamicFields() {
var $parent = $('#' + this.dynamicFieldParent);
var $child = $('#' + this.dynamicFieldChild);
$parent.change(function() {
var $form = $parent.closest('form');
var formData = new FormData();
formData.set($parent.attr('name'), $parent.val());
axios.post($form.attr('action'), formData).then(response => {
$child.replaceWith(
response.data.content.find('#' + this.dynamicFieldChild)
);
});
});
}
}
}
</script>
jquery vue.js
asked Nov 14 '18 at 2:45
Roubi
942826
add a comment |
I made a dynamic vue component that loads a whole form generated backend with Symfony/Twig. This works fine with simple forms.
Now, I'm trying to make it work with dynamic fields (let say country/city) : when you choose a country in one of the form's input an ajax call update the choices in the cities' input.
I'm stuck on the very last step. I get my updated field's html, I replace the cities input with this new object, but the change doesn't show up in the DOM.
Below's my component's code. In the initializeDynamicFields() method (at the bottom of the code), upon success of an ajax call, I make the replacement that does not update the DOM as I hope it would. dynamicFieldParent and dynamicFieldChild are the ids of the form's dynamic fields.
I'm calling this method in both mounted() and updated().
EDIT Problem solved : I was calling a component's prop inside the ajax callback instead of storing its a content into a variable beforehand.
<template>
<div class="card bg-light border-dark">
<div class="card-body">
<h3 v-if="title" class="card-title">{{ title }}</h3>
<div v-html="content" v-on:click.capture="handleClick"></div>
<!--<div ref="body" v-on:click.capture="handleClick"></div>-->
</div>
</div>
</template>
<script type="text/babel">
var formSerialize = require('form-serialize');
export default {
name: "dynamic-form",
props: ['url', 'dynamicFieldParent', 'dynamicFieldChild'],
data() {
return {
title: '',
content: '',
components: null
};
},
created() {
this.load(this.url);
},
mounted() {
if (this.dynamicFieldParent) {
this.initializeDynamicFields();
}
},
updated() {
if (this.dynamicFieldParent) {
this.initializeDynamicFields();
}
},
methods: {
load(url) {
axios.get(url, {
headers: {'X-Requested-With': 'XMLHttpRequest'}
}).then(response => {
this.title = response.data.title;
this.content = response.data.content;
this.components = response.data.components;
});
},
handleClick(e) {
if (e.target.tagName == 'BUTTON' && e.target.type == 'submit' && e.target.form.checkValidity()) {
this.submit(e);
}
},
submit(e) {
e.preventDefault();
this.$root.$emit('form-sending');
let data = formSerialize(e.target.form, {
hash: false, empty: true
});
data += '&' + e.target.name + '='
+ encodeURIComponent(e.target.value);
axios.post(this.url, data, {
headers: {'X-Requested-With': 'XMLHttpRequest'}
}).then(response => {
this.title = response.data.title;
this.content = response.data.content;
this.components = response.data.components;
if (response.status == 201) {
this.$root.$emit('form-success');
}
});
},
initializeDynamicFields() {
var $parent = $('#' + this.dynamicFieldParent);
var $child = $('#' + this.dynamicFieldChild);
$parent.change(function() {
var $form = $parent.closest('form');
var formData = new FormData();
formData.set($parent.attr('name'), $parent.val());
axios.post($form.attr('action'), formData).then(response => {
$child.replaceWith(
response.data.content.find('#' + this.dynamicFieldChild)
);
});
});
}
}
}
</script>
jquery vue.js
asked Nov 14 '18 at 2:45
Roubi
942826
I made a dynamic vue component that loads a whole form generated backend with Symfony/Twig. This works fine with simple forms.
Now, I'm trying to make it work with dynamic fields (let say country/city) : when you choose a country in one of the form's input an ajax call update the choices in the cities' input.
I'm stuck on the very last step. I get my updated field's html, I replace the cities input with this new object, but the change doesn't show up in the DOM.
Below's my component's code. In the initializeDynamicFields() method (at the bottom of the code), upon success of an ajax call, I make the replacement that does not update the DOM as I hope it would. dynamicFieldParent and dynamicFieldChild are the ids of the form's dynamic fields.
I'm calling this method in both mounted() and updated().
EDIT Problem solved : I was calling a component's prop inside the ajax callback instead of storing its a content into a variable beforehand.
<template>
<div class="card bg-light border-dark">
<div class="card-body">
<h3 v-if="title" class="card-title">{{ title }}</h3>
<div v-html="content" v-on:click.capture="handleClick"></div>
<!--<div ref="body" v-on:click.capture="handleClick"></div>-->
</div>
</div>
</template>
<script type="text/babel">
var formSerialize = require('form-serialize');
export default {
name: "dynamic-form",
props: ['url', 'dynamicFieldParent', 'dynamicFieldChild'],
data() {
return {
title: '',
content: '',
components: null
};
},
created() {
this.load(this.url);
},
mounted() {
if (this.dynamicFieldParent) {
this.initializeDynamicFields();
}
},
updated() {
if (this.dynamicFieldParent) {
this.initializeDynamicFields();
}
},
methods: {
load(url) {
axios.get(url, {
headers: {'X-Requested-With': 'XMLHttpRequest'}
}).then(response => {
this.title = response.data.title;
this.content = response.data.content;
this.components = response.data.components;
});
},
handleClick(e) {
if (e.target.tagName == 'BUTTON' && e.target.type == 'submit' && e.target.form.checkValidity()) {
this.submit(e);
}
},
submit(e) {
e.preventDefault();
this.$root.$emit('form-sending');
let data = formSerialize(e.target.form, {
hash: false, empty: true
});
data += '&' + e.target.name + '='
+ encodeURIComponent(e.target.value);
axios.post(this.url, data, {
headers: {'X-Requested-With': 'XMLHttpRequest'}
}).then(response => {
this.title = response.data.title;
this.content = response.data.content;
this.components = response.data.components;
if (response.status == 201) {
this.$root.$emit('form-success');
}
});
},
initializeDynamicFields() {
var $parent = $('#' + this.dynamicFieldParent);
var $child = $('#' + this.dynamicFieldChild);
$parent.change(function() {
var $form = $parent.closest('form');
var formData = new FormData();
formData.set($parent.attr('name'), $parent.val());
axios.post($form.attr('action'), formData).then(response => {
$child.replaceWith(
response.data.content.find('#' + this.dynamicFieldChild)
);
});
});
}
}
}
</script>
jquery vue.js
jquery vue.js
asked Nov 14 '18 at 2:45
Roubi
942826
asked Nov 14 '18 at 2:45
Roubi
942826
edited Nov 15 '18 at 19:13
asked Nov 14 '18 at 2:45
Roubi
942826
asked Nov 14 '18 at 2:45
Roubi
942826
asked Nov 14 '18 at 2:45
Roubi
942826
942826
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
From https://vuejs.org/v2/api/#v-html:
Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates
In other words, since you're using v-html to load your backend generated form, it's not used as a Vue template, it's just pasted in as plain HTML, which means it won't be able to bind to values and update things in the way you normally would in a Vue app.
answered Nov 14 '18 at 3:12
Simon Hyll
9541922
Thanks for your answer. I know this is not the recommended "Vue way", but do you know how I could force the refresh of the DOM ?
– Roubi
Nov 14 '18 at 11:55
$forceUpdate()is a function to force update the Vue DOM, but againv-htmldoesn't bind things to Vue. I think you would need to look into usingVue.compile("template as string")vuejs.org/v2/api/#Vue-compile
– Simon Hyll
Nov 15 '18 at 2:05
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%2f53292456%2fvue-js-dom-not-updating-integrating-a-symfony-form-with-dynamic-content%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
From https://vuejs.org/v2/api/#v-html:
Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates
In other words, since you're using v-html to load your backend generated form, it's not used as a Vue template, it's just pasted in as plain HTML, which means it won't be able to bind to values and update things in the way you normally would in a Vue app.
answered Nov 14 '18 at 3:12
Simon Hyll
9541922
Thanks for your answer. I know this is not the recommended "Vue way", but do you know how I could force the refresh of the DOM ?
– Roubi
Nov 14 '18 at 11:55
$forceUpdate()is a function to force update the Vue DOM, but againv-htmldoesn't bind things to Vue. I think you would need to look into usingVue.compile("template as string")vuejs.org/v2/api/#Vue-compile
– Simon Hyll
Nov 15 '18 at 2:05
add a comment |
From https://vuejs.org/v2/api/#v-html:
Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates
In other words, since you're using v-html to load your backend generated form, it's not used as a Vue template, it's just pasted in as plain HTML, which means it won't be able to bind to values and update things in the way you normally would in a Vue app.
answered Nov 14 '18 at 3:12
Simon Hyll
9541922
Thanks for your answer. I know this is not the recommended "Vue way", but do you know how I could force the refresh of the DOM ?
– Roubi
Nov 14 '18 at 11:55
$forceUpdate()is a function to force update the Vue DOM, but againv-htmldoesn't bind things to Vue. I think you would need to look into usingVue.compile("template as string")vuejs.org/v2/api/#Vue-compile
– Simon Hyll
Nov 15 '18 at 2:05
add a comment |
From https://vuejs.org/v2/api/#v-html:
Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates
In other words, since you're using v-html to load your backend generated form, it's not used as a Vue template, it's just pasted in as plain HTML, which means it won't be able to bind to values and update things in the way you normally would in a Vue app.
answered Nov 14 '18 at 3:12
Simon Hyll
9541922
From https://vuejs.org/v2/api/#v-html:
Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates
In other words, since you're using v-html to load your backend generated form, it's not used as a Vue template, it's just pasted in as plain HTML, which means it won't be able to bind to values and update things in the way you normally would in a Vue app.
answered Nov 14 '18 at 3:12
Simon Hyll
9541922
answered Nov 14 '18 at 3:12
Simon Hyll
9541922
answered Nov 14 '18 at 3:12
Simon Hyll
9541922
answered Nov 14 '18 at 3:12
Simon Hyll
9541922
9541922
Thanks for your answer. I know this is not the recommended "Vue way", but do you know how I could force the refresh of the DOM ?
– Roubi
Nov 14 '18 at 11:55
$forceUpdate()is a function to force update the Vue DOM, but againv-htmldoesn't bind things to Vue. I think you would need to look into usingVue.compile("template as string")vuejs.org/v2/api/#Vue-compile
– Simon Hyll
Nov 15 '18 at 2:05
add a comment |
Thanks for your answer. I know this is not the recommended "Vue way", but do you know how I could force the refresh of the DOM ?
– Roubi
Nov 14 '18 at 11:55
$forceUpdate()is a function to force update the Vue DOM, but againv-htmldoesn't bind things to Vue. I think you would need to look into usingVue.compile("template as string")vuejs.org/v2/api/#Vue-compile
– Simon Hyll
Nov 15 '18 at 2:05
Thanks for your answer. I know this is not the recommended "Vue way", but do you know how I could force the refresh of the DOM ?
– Roubi
Nov 14 '18 at 11:55
Thanks for your answer. I know this is not the recommended "Vue way", but do you know how I could force the refresh of the DOM ?
– Roubi
Nov 14 '18 at 11:55
$forceUpdate() is a function to force update the Vue DOM, but again v-html doesn't bind things to Vue. I think you would need to look into using Vue.compile("template as string") vuejs.org/v2/api/#Vue-compile– Simon Hyll
Nov 15 '18 at 2:05
$forceUpdate() is a function to force update the Vue DOM, but again v-html doesn't bind things to Vue. I think you would need to look into using Vue.compile("template as string") vuejs.org/v2/api/#Vue-compile– Simon Hyll
Nov 15 '18 at 2:05
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%2f53292456%2fvue-js-dom-not-updating-integrating-a-symfony-form-with-dynamic-content%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
