Question

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

如果我评论要求（＆＃39; ./ bootstrap＆＃39;）; ，则不显示表头，调用ajax但表行中不显示数据。

1。 blog.vue文件

<input name="chkTrades" type="checkbox" tradeId="1">

2。 app.js文件

<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>

第3。 bootstrap.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);
      });
    },
  }
});

你能告诉我在哪里错了吗？我在这里使用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上定义道具

<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”，只需使用计算属性而不是创建两个事实来源。

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

1 个答案: