Vue.js点击用户列表中的用户,显示来自$ .ajax()请求

时间:2017-05-17 18:16:33

标签: javascript php jquery ajax vue.js

我有一个用PHP动态调用的用户列表,当我点击时,会触发$ .ajax()请求,而在另一个div中,会加载来自$ .ajax()的内容。 $ .ajax()请求正在运行,但我无法使用v-model进行数据绑定(因为它是div),而v-for的内容显示为空。

我在这里缺少什么?

用户列出HTML代码:

<div class="row">
                <div class="col-md-12">
                   <div id="users" name="users">
                   <!--- section to display the list of users starts -->
                        <?php   if(!empty($user))
                        { 
                            foreach($user as $value) 
                            { 
                            ?>
                                <div class="row oddEven usersElements userid" id=<?php echo $value->id;?> style="margin-top: -1vw;">
                                    <div v-on:click="displayAgregators(<?php echo $value->id;?>)" class="col-md-10">
                                        <span id="items<?php echo $value->id;?>"><?php echo ucfirst($value->username);?></span>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="colorsByUser" :style="{backgroundColor: randomColor(<?php echo $value->id;?>)}"></div>
                                    </div>
                                </div>
                            <?php } 
                        }?>
                    </div>
                </div>
            </div>

HTML代码,它应该显示$ .ajax()内容:

<div class="row" id="toprow">
                <div class="col-md-6">
                    <div id="titlerow">User's Aggregators</div>
                </div>
                <div class="col-md-6">
                        <input class="searchbar" id="search" placeholder="Search..."></input>
                </div>
            </div> 
            <div class="row">
                <div class="col-md-12">
                    <div v-for="agr1 in agr1" id="agregators">{ agr1.id }</div>
                </div>
            </div>

$ .ajax()函数:

displayAgregators:function(userid) {
  var self = this;
  console.log(userid);
  var formData = new FormData();
  formData.append('userid',userid);
    $.ajax({
      url: url + "/displayAgregators",
      type: "POST",
      data: {
      id: userid
    },
  dataType: "json",
    success:function(response){
      console.log(response);//
      this.agr1=response;
      console.log(this.agr1);
    },
    error:function(){

    }
    });//end $.ajax() request
  }//end displayAgregators function

0 个答案:

没有答案