如何通過Vue.js將動態數據傳遞到DOM

Question

在我的上下文中，我獲得了由數據庫（JS文件）帶來的動態文本。

但我不知道如何動態顯示該數據到我的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> 

Answer 1

你不是你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