如何通过Vue.js将动态数据传递到DOM
问题描述:
在我的上下文中,我获得了由数据库(JS文件)带来的动态文本。如何通过Vue.js将动态数据传递到DOM
但我不知道如何动态显示该数据到我的HTML。
主要ID是当我加载页面时,它会自动显示“nom”字段中的数据(如果有数据的话)。
我是Vue.js的新手,所以我需要您的帮助,谢谢。
这里是我的js文件:
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);
});
},
}
这里是我的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>
答
你不是你input
元素与数据对象,像结合:
new Vue({
el: '#adresse_ip',
data: {
address: ''
},
created() {
this.charger_adresse();
},
methods: {
charger_adresse() {
\t //fetch your data via AJAX and set it to the object
\t 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>