Vuejs2 VueJS组件未呈现数据库中的数据？

我正在学习VueJS并将其与laravel 5.4一起使用。我对拉威尔很熟悉。我遇到的问题是在Vue组件中显示数据库中的数据。正在从服务器成功检索数据。在浏览器控制台中打印检索到的数据时，我看不到这一点。但它不能显示在视图中。v-for指令运行得很好，我可以看到编辑按钮伴随着每个循环上的每个原始打印。但是，数据库中的值为空。这是我的displayCategory.vue组件

<template>
    <div>
        <h3>Orders</h3>
               <div class="row">
          <div class="col-md-10"></div>
          <div class="col-md-2">
            <router-link :to="{ name: 'create-product-category'}" class="btn btn-primary">Add Category</router-link>
          </div>
        </div><br />

        <table class="table table-hover table-striped table-responsive">
            <thead>
            <tr>
                <td>Category Name</td>
                <td>Description</td>

                 <td>Actions</td>
            </tr>
            </thead>

            <tbody>
                <tr v-for="category in categories">
                    <td>{{ category.category_name }}</td>
                    <td>{{ category.description }}</td>
                    td><router-link :to="{name: 'edit-product-category', params: { id: category.id }}" class="btn btn-primary">Edit</router-link></td>                    
                    <td><button class="btn btn-danger" v-on:click="deleteCategory(category.id)">Delete</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>


<script>

    export default {
        name:'list-product-categories',
        data(){
            return{
                categories: []
            }
        },

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

        methods: {
            fetchCategories()
            {
              let uri = '/api/product/categories';
              this.axios.get(uri).then((response) => {
                  this.categories = response.data;
                  console.log(this.categories);
              });
            },
            deleteCategory(id)
            {
              let uri = 'http://localhost/dms/public/api/products/categories/${id}';
              this.categories.splice(id, 1);
              this.axios.delete(uri);
            }
        }
    }
</script>

命令
添加类别


类别名称
描述
行动
{{category.category_name}
{{category.description}}
td>编辑
删除
导出默认值{
名称：'list-product-categories'，
数据（）{
返回{
类别：[]
}
},
已创建：函数（）
{
this.fetchCategories（）；
},
方法：{
fetchCategories（）
{
让uri='/api/product/categories'；
this.axios.get（uri）.then（（响应）=>{
this.categories=response.data；
console.log（this.categories）；
});
},
删除类别（id）
{
让我来看看http://localhost/dms/public/api/products/categories/${id}'；
这是一个类别。拼接（id，1）；
this.axios.delete（uri）；
}
}
}

---

应用程序的其他区域工作正常，因为我可以将记录保存到服务器并加载输入表单组件。请协助。

我看到您正在使用的

v-repeat

实际上已被弃用，您需要实现

v-for

而不是

v-repeat

。我想这会解决你的问题：）

---

顺便说一下，在这里查看有关列表呈现和

v-for

：

的更多信息，您可能需要为每个表行提供一个唯一的键。如果您希望db记录具有id，请使用该id

更新 当我将html粘贴到编辑器中时，我注意到html中存在语法错误。有一个悬挂着的td标签

<template>
  <div>
    <h3>Orders</h3>
    <div class="row">
      <div class="col-md-10"></div>
      <div class="col-md-2">
        <router-link :to="{ name: 'create-product-category'}"
                    class="btn btn-primary">Add Category</router-link>
      </div>
    </div><br />

    <table class="table table-hover table-striped table-responsive">
      <thead>
        <tr>
          <td>Category Name</td>
          <td>Description</td>

          <td>Actions</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="category in categories"
            :key="category.id">
          <td>{{ category.category_name }}</td>
          <td>{{ category.description }}</td>
          <router-link :to="{name: 'edit-product-category', params: { id: category.id }}"
                      class="btn btn-primary">Edit</router-link>
          </td>
          <td>
            <button class="btn btn-danger"
                    v-on:click="deleteCategory(category.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
export default {
  name: "list-product-categories",
  data() {
    return {
      categories: [],
    };
  },

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

  methods: {
    fetchCategories() {
      let uri = "/api/product/categories";
      this.axios.get(uri).then(response => {
        this.categories = response.data;
        console.log(this.categories);
      });
    },
    deleteCategory(id) {
      let uri = "http://localhost/dms/public/api/products/categories/${id}";
      this.categories.splice(id, 1);
      this.axios.delete(uri);
    },
  },
};
</script>

工作小提琴示例

---

谢谢你们帮我的忙。尽管所有这些解决方案对我都不起作用

---

我改变了数据库，它工作了。我甚至都没碰我的前端代码。我想我的数据库有问题，我说不出确切的原因。我改变了我的SQL数据库，它工作了。希望指向某人某处。我曾尝试重新安装vue并进行任何更新，但没有成功

哦，对不起，我一直在用v-for，刚刚试过v-repeat。两者都不起作用。我已经更新了帖子。谢谢您指出这一点。@wafutech您能发布一些API返回的数据吗？例如，

console.log（this.categories）

的结果我用控制台输出更新了代码。谢谢。我已经创建了一个新的laravel项目，并且不得不重新设置vue，结果却一样。这很尴尬。看来我找不到解决这个问题的办法。否则，谢谢你们试图把我从这个深陷的困境中拉出来。希望有一天我能解决它。好吧，这甚至是必需的。谢谢你的回答@Alexashareganm，但仍然不起作用。我只是不明白为什么控制台上显示的是数据，而浏览器上显示的是空白行。你能举个提琴或代码笔的例子吗？我有什么要检查的吗？@wafutech，我更新了我的答案。我发现了一个小语法错误，它会使vue模板编译器崩溃。确定。但在我的最后，我证明检查过了，代码编译得很好。即使粘贴了你的代码，我仍然得到了相同的结果。空白循环。控制台中的输出指示代码正在编译。我用控制台输出更新了我的帖子。你的HTML

td>
[{"id":1,"asset_category":"LB01","class_id":1,"description":"Land & Buildings","created_at":"2018-02-11 16:25:26","updated_at":"2018-02-11 16:25:26"},{"id":2,"asset_category":"PE01","class_id":2,"description":"Plan & Equipment","created_at":"2018-02-11 16:25:26","updated_at":"2018-02-11 16:25:26"},{"id":3,"asset_category":"CE01","class_id":3,"description":"Computer Equipment","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":4,"asset_category":"OE01","class_id":4,"description":"Office Equipment","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":5,"asset_category":"FF01","class_id":5,"description":"Furniture & Fixtures","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":6,"asset_category":"MV01","class_id":6,"description":"Motor Vehicles","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":7,"asset_category":"CS01","class_id":7,"description":"Computer Software","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":8,"asset_category":"Sample Category","class_id":1,"description":"Sample fixed asset category","created_at":"2018-02-24 13:05:07","updated_at":"2018-02-24 13:05:07"},{"id":9,"asset_category":"Furniture","class_id":2,"description":"Wooden assets such as chairs and tables","created_at":"2018-02-24 13:06:39","updated_at":"2018-02-24 13:06:39"}]