我正在学习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>
应用程序的其他区域正常工作，因为我可以将记录保存到服务器并加载输入表单组件。请协助。
答案 0 :(得分：1)
您可能需要为每个表行提供唯一键。如果您的db记录有id，请使用它。
<?xml version="1.0" encoding="utf-8"?>
<!--
This file is used by the publish/package process of your Web project. You can customize the behavior of this process
by editing this MSBuild file. In order to learn more about this please visit https://go.microsoft.com/fwlink/?LinkID=208121.
-->
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<WebPublishMethod>MSDeploy</WebPublishMethod>
<LastUsedBuildConfiguration>Release</LastUsedBuildConfiguration>
<LastUsedPlatform>Any CPU</LastUsedPlatform>
<SiteUrlToLaunchAfterPublish>http://www.website.local</SiteUrlToLaunchAfterPublish>
<LaunchSiteAfterPublish>False</LaunchSiteAfterPublish>
<ExcludeApp_Data>False</ExcludeApp_Data>
<MSDeployServiceURL>https://server3:8172/msdeploy.axd</MSDeployServiceURL>
<DeployIisAppPath>website</DeployIisAppPath>
<RemoteSitePhysicalPath />
<SkipExtraFilesOnServer>False</SkipExtraFilesOnServer>
<MSDeployPublishMethod>WMSVC</MSDeployPublishMethod>
<EnableMSDeployBackup>True</EnableMSDeployBackup>
<UserName>DOMAIN\User</UserName>
<_SavePWD>True</_SavePWD>
<PublishDatabaseSettings>
<Objects xmlns="">
<ObjectGroup Name="Website.Db.Context" Order="1" Enabled="False">
<Destination Path="" />
<Object Type="DbCodeFirst">
<Source Path="DBMigration" DbContext="Website.Db.Context, Website" MigrationConfiguration="Website.Migrations.Configuration, Website" />
</Object>
</ObjectGroup>
<ObjectGroup Name="Website.My.MySettings.DbConnectionString" Order="2" Enabled="False">
<Destination Path="" />
<Object Type="DbDacFx">
<PreSource Path="Data Source=(local);Initial Catalog=Website;Integrated Security=False;Persist Security Info=False;User ID=username;Password=password" includeData="False" />
<Source Path="$(IntermediateOutputPath)AutoScripts\Website.My.MySettings.DbConnectionString_IncrementalSchemaOnly.dacpac" dacpacAction="Deploy" />
</Object>
<UpdateFrom Type="Web.Config">
<Source MatchValue="Data Source=(local);Initial Catalog=Website;Integrated Security=False;Persist Security Info=False;User ID=username;Password=password" MatchAttributes="$(UpdateFromConnectionStringAttributes)" />
</UpdateFrom>
</ObjectGroup>
</Objects>
</PublishDatabaseSettings>
</PropertyGroup>
<ItemGroup>
<MSDeployParameterValue Include="$(DeployParameterPrefix)Website.Db.Context-Web.config Connection String" />
</ItemGroup>
<ItemGroup>
<_ConnectionStringsToInsert Include="Website.Db.Context" />
</ItemGroup>
</Project>
<强>更新 当我将它粘贴到我的编辑器中时，我注意到html中存在语法错误。有一个悬挂的标签。
<try v-for="c in categories" :key="c.id" />这是我的控制台输出：
<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>
答案 1 :(得分：0)
我发现您使用的v-repeat实际上已被弃用，您需要实施v-for而不是v-repeat。我认为它会解决你的问题：）
顺便说一下，请查看有关列表渲染和v-for的更多信息：https://vuejs.org/v2/guide/list.html
答案 2 :(得分：0)
谢谢你们帮我解决问题。虽然所有这些解决方案对我都不起作用。
我更改了数据库并且工作正常。我甚至没有触摸我的前端代码。我认为我的数据库存在问题我无法确切说明原因。我从我的SQL更改了数据库，它工作正常。希望有人在某处。我曾试图重新安装vue并做任何更新，但没有让它工作。