VueJS 组件不从数据库渲染数据？

Question

我正在学习 VueJS 并将其与 laravel 5.4 一起使用。我熟悉laravel。我遇到的问题是在 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>

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

Answer 1

我看到您使用的 v-repeat 实际上已被弃用，您需要实施 v-for 而不是 v-repeat。我认为它会解决您的问题:)

顺便说一下，在这里查看有关列表呈现和 v-for 的更多信息：https://vuejs.org/v2/guide/list.html

Answer 2

您可能需要为每个 table 行提供唯一键。如果您的数据库记录有一个 ID，请使用它。

<try v-for="c in categories" :key="c.id" />

更新当我将 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>

这是我的控制台输出：

[{"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"}]

工作Fiddle示例 https://jsfiddle.net/alexsasharegan/cdmg789u/25/

Answer 3

谢谢你们试图帮助我。尽管所有这些解决方案都不适合我。

我更改了数据库并且成功了。我什至没有碰我的前端代码。我认为我的数据库有问题，我无法确切地说出原因。我从我的 SQL 更改了数据库并且它有效。希望将某人指向某个地方。我曾尝试重新安装 vue 并进行任何更新，但没有成功。

VueJS 组件不从数据库渲染数据？

VueJS component not rendering data from database?

vuejs2

laravel-5.4