Question

有一种情况我必须在vuejs中的第一个ajax（在mounted函数中）之后获得额外数据，我已将第二个ajax置于if条件和success内部第一个ajax的功能！

它正常工作，我在Chrome中看到Vue Devtools中的数据，但数据不会在视图中呈现。

伪代码：

var vm = new Vue({
         el: '#messages',
        data: {
            participants: [],
            active_conversation: '',
            messages: []
        },

        methods: {

            getParticipants: function () {
                   return this.$http.post('message/get-participants').then(
                    function (response) {

                        vm.participants = response.data.participants;
                        // if there is a conversation_id param in url
                        if (getUrlParameterByName('conversation_id')) {
                             // Second Ajax Is Called Here inside First Ajax
                             return vm.getConversationMessages (getUrlParameterByName('conversation_id')); // this ajax call is getting data but not showing in view  
                        }
                    }

            },

           getConversationMessages : function(conv_id){
              // Second Ajax Call to get Conversation messages
              // and showing them , works onClick
               return this.$http.post('message/get-messages/' + conv_id).then(
                    function (response) {
                        if (response.data.status == 'success') {
                            console.log(response.data.messages)
                            vm.messages = response.data.messages;
                            vm.$forceUpdate();
           }
        },


      mounted: function () {
            this.getParticipants()
        }

})

获取特定会话消息的第二个Ajax调用是响应onclick事件并显示消息，但是当在First Ajax成功响应（getParticipants()）内使用此函数时，它正确获取数据我可以在DevTools VueJs Extension中看到消息设置但是视图没有显示消息，我已经尝试了vm.$set()但没有机会。

更新

第二个Ajax正在处理没有错误和消息数据属性被填充（我检查了Vue DevTools），唯一的问题是视图没有显示消息!!但是当我通过点击一个对话手动完成它，再次执行第二个ajax并且我可以看到消息！我在第二个ajax之后也没有机会尝试vm.$forceUpdate()。

Update2 html部分（错误在这里!!）

<a vbind:id="conv.id" v-on:click="getMessages(conv.id)" onclick="$('#user-messages').addClass('active')">

Answer 1

当您使用getConversationMessages执行ajax请求而不放置时，DOM会更新消息成功回调getConversationMessages的ajax请求的getParticipants是在这一行遇到错误的事实

this.participants = response.data.participants;

您在ajax请求的成功回调中使用了一个普通函数，这是this未指向vue实例的原因 adnd this.participants会给您一个未定义的错误。因此，使用vm insteaad指向vue实例，就像在程序的其余部分中所做的那样

vm.participants = response.data.participants;

修改

Answer 2

使用http回调首次完成后调用第二个http请求，或者也可以使用Promise。

return this.$http.post(function(response){

   // first call
}).then(function(response){

// Second call
})

Answer 3

install_github("hrbrmstr/decapitated")
library(decapitated)
library(rvest)

chrome_version()
## Google Chrome 63.0.3239.59 beta

pg <- chrome_read_html("https://swishanalytics.com/optimus/nba/daily-fantasy-salary-changes?date=2017-11-25")

html_node(pg, "table#stat-table") %>% 
  html_table() %>% 
  tibble::as_tibble() 
## # A tibble: 256 x 7
##    Position          Player Salary         Change `Proj Fantasy Pts` `Avg Fantasy Pts`   Diff
##       <chr>           <chr>  <chr>          <chr>              <dbl>             <chr>  <chr>
##  1       PF      Thon Maker $3,900  +$600 (18.2%)              12.88             13.24  -0.36
##  2       PG DeAndre Liggins $3,500  +$500 (16.7%)               9.68              7.80  +1.88
##  3       PG   Elfrid Payton $6,400  +$700 (12.3%)              32.77             28.63  +4.14
##  4        C   Jahlil Okafor $3,000 -$400 (-11.8%)               1.71             12.63 -10.92
##  5       PF    John Collins $5,200   +$400 (8.3%)              29.65             24.03  +5.63
##  6       SG     Buddy Hield $4,600  -$400 (-8.0%)              17.96             21.84  -3.88
##  7       SF    Aaron Gordon $7,000   +$500 (7.7%)              32.49             36.91  -4.42
##  8       PG    Kemba Walker $7,600  -$600 (-7.3%)              36.27             38.29  -2.02
##  9       PG    Lou Williams $6,600  -$500 (-7.0%)              34.28             30.09  +4.19
## 10       PG       Raul Neto $3,200   +$200 (6.7%)               6.81             10.57  -3.76
## # ... with 246 more rows

Answer 4

我很抱歉！问题出在html中，我的队友不知道vuejs在div元素中添加了onclick事件，因此只有当用户点击对话时才会激活消息区域，而不是在尝试将其置于第一个ajax！

我更新了我的问题，以显示导致问题的html部分。

谢谢大家

另一个ajax里面的vue js ajax正在获取数据而不是渲染视图

4 个答案: