Я пытаюсь сделать какой-то повторно используемый шаблон элемента слота VueJS, но он не работает хорошо.
Проблема, с которой я сталкиваюсь, выглядит следующим образом.Я сделал 3 файла Vue, чтобы создать шаблон.
Guide.vue
, который будет единицей для цикла. ListView.vue
импорт ListTemplate.vue
и Guide.vue ListTemplate
с петлей v-for
для подпорок строк из ListView.vue
и слотом для Guide.vue.
Я хочу передать через слот реквизиты строк с выходом из цикла v-for
в Guide.vue
, но, похоже, это undefined
.Поэтому я попытался объявить область видимости в элементе компонента обтекания шаблона на ListView.vue
, но это не сработало.
// Guide.vue
<template>
<tr onclick="location.href='info_view.html'">
<td>
<p class="alarm_h1">{{ slotProps.row.title }}</p>
<p class="alarm_h2">{{ slotProps.row.title }}</p>
<p class="alarm_h2">{{ slotProps.row.title }}</p>
</td>
</tr>
</template>
<script>
export default {
name: "guide",
props: ['slotProps', 'row']
}
</script>
// List.vue
<template>
<div>
<Guide-head/>
<List-template :rows="guides">
<template>
<component :is="tr_component"></component>
</template>
</List-template>
</div>
</template>
<script>
import Guide from '../../../components/template/list/tr/Guide'
import GuideHead from '../../../components/template/head/GuideHead'
import ListTemplate from '../../../components/template/list/ListTemplate'
export default {
name: "list",
components: {
Guide,
GuideHead,
ListTemplate
},
data() {
return {
guides: [
{id: 1, date: '2018.08.20 15:00', title: 'title 1', emergency: false},
{id: 2, date: '2018.08.20 15:00', title: 'title 2', emergency: false},
{id: 3, date: '2018.08.20 15:00', title: 'title 3', emergency: false}
],
tr_component: 'guide'
}
}
}
</script>
// ListTemplate.vue
<template>
<div>
<table class="reser_check_table" cellpadding="0" cellspacing="0">
<div v-for="(row, idx) in rows" @click.native="clickNotice(idx)" :key="row.id">
<slot v-bind:row="row">{{row.title}}</slot>
</div>
</table>
</div>
</template>
<script>
export default {
name: "list",
props: ['rows'],
/*components: {
rowTemplate: Row
},*/
methods: {
clickNotice(idx) {
console.log('clicked');
//this.$emit('viewNotice', idx); @viewNotice="view"
},
view() {
}
}
}
</script>