Inserting dynamic html tags using Vue.js

Question

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?

what do you mean "But the my vue js script is not working in vue..." you are not able to see success/fail on postResult ? — samayo
– samayo, Commented Mar 16, 2018 at 11:22
Are you able to use axios? vue http is kind of obsolete at this moment — samayo
– samayo, Commented Mar 16, 2018 at 11:33
For me it seems to be working jsfiddle.net/943bx5px/167 if you want dynamic div to be inserted, check this answer stackoverflow.com/questions/47202998/… — samayo
– samayo, Commented Mar 16, 2018 at 11:51
actually this might be simpler solution to embed html tags jsfiddle.net/943bx5px/170 — samayo
– samayo, Commented Mar 16, 2018 at 12:00

Nver Abgaryan · Accepted Answer · 2018-08-09 10:38:38Z

<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

bbsimonbb · Accepted Answer · 2018-03-16 11:34:12Z

0

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 ?

answered Mar 16, 2018 at 11:34

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

Collectives™ on Stack Overflow

Inserting dynamic html tags using Vue.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related