Question

当我写一些消息时，我尝试动态通知。

这是我的vue.js代码。

<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>

当我使用jQuery的Ajax时，我使用了这种方法。但我的vue.js脚本无效。我应该更多地了解Vue JS吗？或者我忘记了这个vue.js中的一些语法？

Answer 1

<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>

使用箭头功能可访问回调函数中的“ this”。

对于HTTP请求，最好使用Axios。另外，您可以使用vuex存储并通过操作来管理您的请求

Answer 2

你没有＆＃34;这个＆＃34;在你的回复回调中。在点击功能的顶层执行var me = this，然后在回调中执行me.postResult = ...。

一般而言，请尝试将所有标记保留在模板元素中，不是吗？

使用Vue.js插入动态html标记

2 个答案: