How can I pass dynamic data to DOM with Vue.js - vue.js

Question

In my context, I got dynamic text brought by database (JS file).
But I don't know how to display that data to my HTML dynamicly.
The main ID is when I load the page, It automaticly display data (if there is data) on the "nom" field.
I am new to Vue.js so I'll need your help there, thanks.
Here is my js file :
var ip_adresse = new Vue({
el: "#adresse_ip",
data: {
adresse: [],
},
created() {
this.charger_adresse();
},
methods: {
charger_adresse() { // Méthode
var self = this;
$.get(SITE_URL + '/modules/informations_pratiques/infos_mairie/load_adresse/' + APP_ID, function(reponse) {
console.log(reponse);
self.adresse.nom = reponse[0]['adresse'];
console.log(self);
});
},
}
And here is my HTML :
<article id="adresse_ip">
<form action="">
<div class="row">
<p class="stay-strong">Renseignez l'adresse de la Mairie</p>
<input name="nom" type="text">
</div>
<div class="row submit">
<button class="publish">Enregistrer les informations</button>
</div>
</form>
</article>

Answer 1

You're not binding your input element with the data object, like:
new Vue({
el: '#adresse_ip',
data: {
address: ''
},
created() {
this.charger_adresse();
},
methods: {
charger_adresse() {
//fetch your data via AJAX and set it to the object
this.address = 'foobar'
}
}
})
<script src="https://unpkg.com/vue"></script>
<article id="adresse_ip">
<form action="">
<div class="row">
<p class="stay-strong">Renseignez l'adresse de la Mairie</p>
<input name="nom" type="text" v-model="address" :val="address">
</div>
<div class="row submit">
<button class="publish">Enregistrer les informations</button>
</div>
</form>
</article>
Read more about form input bindings