CODEWITHSUNDEEP
javascriptvue.js
spritecodej
spritecodej

Reputation: 459

Inserting dynamic html tags using Vue.js

I try to dynamic notify when I wrote some messages.

That's my vue.js code. 

<script>
Vue.http.options.emulateJSON = true; // Send as 
new Vue({
  el: '#app',
  data: {
      name : "",
      postResult : ""
  },
  methods: {
    click: function() {
      this.$http.post('/api/test',   {name:this.name}).then(function(response){
        var result = response.data;
        //this.postResults.push(result.name);
        if (result.name == "1234")
        {
          this.postResult = "<div> Success </div>";
        } 
        else 
        {
          this.postResult = "<div> Fail </div>";
      }
    }, function(response){
      // Error Handling
    });
  }
}
});
</script>

When I use jQuery's Ajax, I used this method. But my vue.js script is not working. Should I study more about Vue JS? or I forget some syntax in this vue.js?

Upvotes: 1

Views: 397

Answers (2)

Nver Abgaryan
Nver Abgaryan

Reputation: 621

<template>
  <div v-if='requestCompleted'>
    <div v-if='!postResult'> Fail </div>
    <div v-else-if='postResult'> Success </div>
  </div>
</template>

<script>
Vue.http.options.emulateJSON = true; // Send as 
new Vue({
  el: '#app',
  data: {
      name : "",
      postResult : null,
      requestCompleted: false
  },
  methods: {
    click: function() {

      this.$http.post('/api/test',   {name:this.name}).then((response)=>{
        var result = response.data;
        this.requestCompleted=true;
        if (result.name == "1234")
        {
          this.postResult = true;
        } 
        else 
        {
          this.postResult = false;
      }
    }, function(response){
      // Error Handling
    });
  }
}
});
</script>

Use arrow functions for getting access to 'this' inside your callback function.

For HTTP requests, it's better to use Axios. Also, you can use vuex store and manage your requests with actions

Upvotes: 2

bbsimonbb
bbsimonbb

Reputation: 28982

You don't have "this" inside your response callback. Do var me = this at the top level of your click function, then do me.postResult = ... in the callback.

In general terms, try and keep all your markup in the template element, no ?

Upvotes: 0

Related Questions