Vue.js2 呈现空数组答案

【问题标题】：Vue.js2 renders empty arrayVue.js2 呈现空数组
【发布时间】：2017-06-09 11:14:00
【问题描述】：

我在我的 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>

<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 开发工具显示变量

【问题讨论】：

这个记录了什么？ console.log(JSON.stringify(self.names)，还是根本不记录？
@John 是的，这个记录了 JSON 响应。这就是为什么我知道数据在那里。
你有 vue devtools 吗？ names 变量在那里显示结果？
@John 是的，它确实看到了上面的图片
您的模板和组件脚本在同一个文件中是吗？

标签： javascript laravel vue.js vuejs2 laravel-5.4

【解决方案1】：

我不知道这是否会有所帮助，但我将您的代码组合成一个可运行的 sn-p，它可以按预期工作。显然我替换了你的数据请求。

听起来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>

【讨论】：

谢谢，这并没有解决问题，但我确实得到了一个提示。当我从挂载函数中记录 this.names 时，我得到类似这样的内容 [ob: Observer] 0 : Array(20) //这是数据长度 : 1 ob : Observer proto : Array 这可能是因为这个原因[ob: Observer] 我没有得到数据
观察者是 Vue 用来使对象反应的东西。
是的，但我认为这是导致问题的原因，但我不知道如何解决它
this.names.length 返回 0 但 [ob: Observer] 0 : Array(20) 表示数组存在，只是无法迭代
在mounted 函数中，数组不应该被填充。您调用getData，它执行异步调用。我注意到您提供了jsonpCallback；你在做什么？

【解决方案2】：

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

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

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

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

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

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

【讨论】：