laravel - 动态覆盖模板槽
问题描述
belongsTo()
从 Laravel的关系中获取一些标题配置。响应如下所示:
我的Vuetify 数据表配置是这样的:
<v-data-table
:headers="newHeaders"
:items="products"
item-key="name"
>
<template v-slot:header.stocks.0.pivot.quantity="{ header }">
{{ header.text }}
<v-icon>
mdi-pencil-outline
</v-icon>
</template>
</v-data-table>
我只想使用该插槽将我的图标“动态”添加到所有“Stock”标题添加(可能是 1、2、3 或更多标题)。
我怎样才能实现这个功能?我的意思是,现在是静态的,因为如果添加另一只股票,我必须用<template v-slot:header.stocks.1.pivot.quantity="{ header }">
它来做。
编辑: 这是表格的样子:
解决方案
我使用了这个答案的解决方案:多个模板插槽的相同插槽内容这是一种华丽,这是我的解决方案:
模板标签
<v-data-table
:headers="newHeaders"
:items="products"
item-key="name"
>
<template
:slot="slotName"
slot-scope="props"
v-for="slotName in pivotNames">
{{ props.header.text }}
<v-icon>
mdi-pencil-outline
</v-icon>
</template>
脚本标签
export default {
name: "Product",
data() {
return {
newHeaders: [...],
products: [...],
stockHeaders: [], //Have stock headers info
pivotNames: [] //Used in the v-for
}
},
methods: {
getPivotHeaders() {
const self = this;
this.stockHeaders.forEach(function(stock, index) {
let indexFound = stock["value"].includes("pivot.quantity");
if (indexFound) {
self.pivotNames.push("header." + stock["value"]); //Create name for slot template
}
});
}
}
推荐阅读
- ffmpeg - Ffmpeg 转换为 HLS - 视频质量极低
- javascript - React Native 组件不能使用 super
- string - 将字符串转换为任何其他原始类型的惯用方式
- docker - 重新连接到由于 ssh 断开而分离的 docker 容器
- xcode - 未找到建筑的符号
- javascript - Coveo 加载更多功能
- collapse - 在列上的字段选项中添加数组值并在 responsiveLayoutCollapseFormatter-Tabulator 上使用
- jquery - jquery tab wcag 可访问性:给定元素不允许角色表示;确保角色属性具有适合元素的值
- xamarin - 如何检测 Xamarin 表单中启用和禁用的 GPS
- php - 从字符串为 Mongo 创建 PHP 数组