如何通过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>

Read more about form input bindings