Question

我在laravel项目中使用vue.js。问题是vue.js渲染空数组，虽然我看到变量名称有一些数据。

我正在使用laravel 5.4和vue.js2。对于jsonp get方法，我使用的是vue-resource

另外，如果我想在模板中看到包含数据{{names}}的变量，它只会添加一个空数组。两种情况都没有错误日志。

template.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-body">
                    {{names}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

的js

<script>
    export default {
        data: function(){
            return {
              names: []
            };

        },
        methods:  {
         getData: function(){
             var self = this;
              // GET request
           this.$http.jsonp(url, {jsonpCallback: "JSON_CALLBACK"})
           .then(response=>{
               return response.body;              
           })
           .then(data =>{
               self.names = data
                console.log(JSON.stringify(self.names))// logs the data 
           })
        }
      },
       mounted() {
            this.getData()

            console.log('Component mounted.')
        }
    }
</script>

blade.php

<search id='search'>
</search>

JSON响应如下所示

[
   {
      "uri":"http://en.wikipedia.org/wiki/Samsung",
      "id":"24366",
      "type":"org",
      "score":527013,
      "label":{
         "eng":"Samsung"
      }
   },
   {
      "uri":"http://en.wikipedia.org/wiki/Samsung_Electronics",
      "id":"30860",
      "type":"org",
      "score":135216,
      "label":{
         "eng":"Samsung Electronics"
      }
   }
]

vue dev工具显示变量

Answer 1

我不知道这是否会有所帮助，但我将您的代码放在一个可运行的代码段中，并且按预期工作。显然我已经替换了你的数据请求。

听起来self在某种程度上不是你在做作业时的想法。不过，我不知道会发生什么。

new Vue({
  el: '#search',
  components: {
    search: {
      data: function() {
        return {
          names: []
        };

      },
      methods: {
        getData: function() {
          const self = this;

          setTimeout(function () {
            self.names = [{
                "uri": "http://en.wikipedia.org/wiki/Samsung",
                "id": "24366",
                "type": "org",
                "score": 527013,
                "label": {
                  "eng": "Samsung"
                }
              },
              {
                "uri": "http://en.wikipedia.org/wiki/Samsung_Electronics",
                "id": "30860",
                "type": "org",
                "score": 135216,
                "label": {
                  "eng": "Samsung Electronics"
                }
              }
            ];
          }, 0);

        }
      },
      mounted() {
        this.getData()

        console.log('Component mounted. names is', this.names);
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<search id='search' inline-template>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
          <div class="panel-body">
            {{names}}
          </div>
        </div>
      </div>
    </div>
  </div>
</search>

Answer 2

我能够解决这个问题，我不太清楚为什么，但问题是因为我已经启动了我的组件

Vue.component('search', require('./components/Searchnames.vue'));

const search = new Vue({
    el: '#search'
});

然后在另一个文件中我通过export default引用了数据和方法函数，这导致了问题，删除了

const search = new Vue({
    el: '#search'
});

解决了这个问题。不知道为什么会这样，

Vue.js2呈现空数组

2 个答案: