2017-02-16 2 views
1

verwenden Ich möchte get Methode von Vue in HTML-Datei senden. Mein Code sieht:Vue wie get-Methode

<html> 
    <head> 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    </head> 
    <body> 
     <div id="myDiv"> 
      <p>{{something}}</p> 
     </div> 
    </body> 
    <script> 
     new Vue({ 
      el: '#myDiv', 
      data: function(){ 
       return{ 
        something: '' 
       } 
      }, 
      ready: function(){ 
       this.getValue(); 
      }, 
      methods: { 
       getValue: function(){ 
        var value = value; 
        this.$http.get('https://jsonplaceholder.typicode.com/posts/1') 
         .success(function(value){ 
          this.$set('value',value); 
         }) 
         .error(function(err){ 
          value.log(err); 
         }); 
       } 
      } 
     }); 
    </script> 
</html> 

Wie ist es möglich Reaktion in something in div mit id="myDiv" nur als String zu setzen? (Zum Beispiel json:

{ 
    "name":"Jon", 
    "age":1 
} 

Es gibt keine Fehler in der Konsole, aber mein Bildschirm ist völlig leer

@Update. Ergebnis ist:

enter image description here

@ Update2 mein html Datei (von Ihrem Code):

<html> 
    <head> 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    </head> 
    <body> 
     <div id="myDiv"> 
      <div v-if="response.userId"> 
      {{ response.userId }} 
      {{ response.id }} 
      {{ response.title }} 
      {{ response.body }} 
      </div> 
      <div v-if="response.error"> 
      <p>Request failed</p> 
      </div> 
    </div> 
    </body> 
    <script> 
     var vm = new Vue({ 
      el: '#myDiv', 
      data: { 
       response: {} 
      }, 
      created() { 
      this 
      .$http 
      .get('https://jsonplaceholder.typicode.com/posts/1') 
      .then(function(response) { 
      console.log(response) 
      this.$set('response', response.data) 
      }) 
      } 
     }); 
    </script> 
</html> 

Antwort

1
<html> 
    <head> 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    <script src="https://cdn.jsdelivr.net/vue.resource/1.2.0/vue-resource.min.js"></script> 
    </head> 
    <body> 
     <div id="myDiv"> 
      <div v-if="response.userId"> 
      {{ response.userId }} 
      {{ response.id }} 
      {{ response.title }} 
      {{ response.body }} 
      </div> 
      <div v-if="response.error"> 
      <p>Request failed</p> 
      </div> 
    </div> 
    </body> 
    <script> 
     var vm = new Vue({ 
      el: '#myDiv', 
      data: { 
      response: {} 
      }, 
      created() { 
      this 
      .$http 
      .get('https://jsonplaceholder.typicode.com/posts/1') 
      .then(function(response) { 
      console.log(response) 
      this.response = response.data 
      }) 
      } 
     }); 
    </script> 
</html> 
+0

verwendete ich Ihren Code, aber das Ergebnis ist: '{{response.message}} {{Response.Status}} {{response.error}}' – littlewombat

+0

die Antwort @littlewombat –

+0

aktualisiert ich in meinem Beitrag zur Folge setzen – littlewombat