Question

请在下面找到vuejs代码。当我直接在浏览器上访问URL时，会检索数据（JSON），但是当通过http请求检索数据时，数据不会存储在变量中。我正在使用Vuejs和Laravel。有人能告诉我代码有什么问题。谢谢。

<script>
Vue.component('account-type-list', {
  template: `<div></div>`
  data:() => {
    return {
      typesofaccount:[]
    };
  },

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

  methods: {
    getAccountTypes: function() {
      this.$http.get('/list/accounttypes').then(response => {
          this.typesofaccount = response.body
        });
    },
  }
});

Vue.component('type', {
  template: '<a class="active item"><slot></slot></a>'
});
  new Vue({
    el: '#root',
  });
</script>

Answer 1

响应回调中的

this可能不是您的组件。

尝试：

getAccountTypes: function() {
  var component = this;
  this.$http.get('/list/accounttypes').then(response => {
      component.typesofaccount = response.body
    });
},

Answer 2

必须导入

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>

子刀片模板中的

不在主布局中。

提取的响应数据未存储在组件的数据属性中

2 个答案: