为什么没有在 blog.vue 中加载项目？

Question

我正在 app.js 中从 blog.vue 加载模板，但是由于没有进行 ajax 调用，因此它只显示表的标题行而不是表行。

如果我注释require('./bootstrap');，它不显示表头，调用ajax但表行中不显示数据。

1. blog.vue 文件

<template>
<div class="table-responsive">
  <table class="table table-borderless">
    <tr>
      <th>Title</th>
      <th>Description</th>
    </tr>
    <tr v-for="item in items">
      <td>@{{ item.title }}</td>
      <td>@{{ item.description }}</td>

    </tr>
  </table>
</div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component ready.')
        }
    }
</script>

2。 app.js 文件

require('./bootstrap');

Vue.component('list-blog', require('./components/blog.vue'));

new Vue({
  el :'#manage-vue',
  data :{
    items: [],
    newItem : {'title':'','description':''},
    fillItem : {'title':'','description':'','id':''}
  },

  ready: function() {
    this.getVueItems();
  },
  methods: {
    getVueItems: function() {
      this.$http.get('/vueitems?page='+page).then((response) => {
        this.$set('items', response.data.data.data);
        this.$set('pagination', response.data.pagination);
      });
    },
  }
});

3. bootstrap.js

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');


window.Vue = require('vue');
require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

你能告诉我我哪里错了吗？我在这里使用 laravel-elixir。

Answer 1

我认为这应该只是 response.data.data

// this.$set('items', response.data.data.data);
// to
this.$set('items', response.data.data);

你甚至可以简化这个

this.$http.get('/vueitems?page='+page).then((response) => {
    this.items = response.data.data;
    this.pagination = response.data.pagination;
}.bind(this)); // important bind(this)

您似乎正在返回一个分页对象。因此第三个数据是错误的——不是吗？ 此外，您通常会将项目作为属性传递给组件。只需在你的 blog.vue 中定义 prop

<script>
export default {
    props: ['items'],
    mounted() {
        console.log('Component ready.')
    }
}
</script>

然后将它传递到任何你使用它的地方

<list-blog :items="items"></list-blog>

我强烈推荐使用 Chrome 和 Vue devtools https://github.com/vuejs/vue-devtools - 这些将帮助您了解和理解数据绑定

另一个较小的事情是你不应该单独绑定分页对象和项目。分页对象包含项目。如果您不想在模板中使用“pagination.data”，只需使用计算属性，而不是创建两个事实来源。