Question

我正在laravel中尝试这个vuejs应用程序，这是一个简单的应用程序，我在那里获取数据，然后尝试用laravel显示它，这里是我的messages.vue

Messages.vue

<template lang="html">
<div id="frame2">
  <div  id="contacts">
    <ul>
      <div v-for="privsteMsg in privsteMsgs">
        <li class="contact">
          <div class="wrap">
            <span class="contact-status online"></span>
            <img :src="'/uploads/imgs/avatars/' + privsteMsg.avatar">
            <div class="meta">
              <p class="name">{{privsteMsg.name}}</p>
              <p class="preview">Hey it's me</p>
            </div>
          </div>
        </li>
      </div>
    </ul>
  </div>

</div>

</template>
<script>
export default {
  props: ['userid'],
  data() {
    return {
      privsteMsgs: [],
      bUrl1: 'http://test.app:8000',
    }
  },

  ready: function(){
    this.created();
  },

  created(){
    axios.get(this.bUrl1 + '/api/getMessages')
      .then(response => {
        app.privsteMsgs = response.data; //we are putting data into our posts array
        console.log(app.privsteMsgs);
      })
      .catch(function (error) {
        console.log(error); // run if we have error
      });

  },

}
</script>

奇怪的是，console.log(app.privsteMsgs);正常返回数据，但是当我尝试循环时，没有任何东西显示好像没有数据。

Answer 1

您已声明app变量但未定义。用这个替换app变量

created(){
        let _this = this
        axios.get(this.bUrl1 + '/api/getMessages')
          .then(response => {
            _this.privsteMsgs = response.data; //we are putting data into our posts array
            console.log(_this.privsteMsgs);
          })
          .catch(function (error) {
            console.log(error); // run if we have error
          });

      }

vuejs中的V-for循环不会返回任何内容

1 个答案: