我有2个Vue组件。父组件:list of services
,其中存储了许多service
组件。
Service.vue
<template lang="pug">
a.list-group-item.list-group-item(id='list-' + name + '-list' data-toggle="list" href="#list-" + name role="tab" aria-controls=name) {{ name }}
</template>
<script>
export default {
props: {
name: String,
description: String
}
}
</script>
List.vue
<template lang="pug">
section.border-bottom.border-warning
.container(style="background-color: #EA846F")
.text-white.text-center.title Serviciile oferite
.list-group#list-tab(v-if="response.status === 200" role="tablist")
service(v-for="service in response.data" :name="service.name" :description="service.description")
.h5.text-muted.text-center(v-else) {{ response.statusText }}
</template>
<script>
import service from './service';
import axios from 'axios';
export default {
data() {
return {
response: {},
}
},
components: {
service
},
methods: {
async getAll() {
this.response = await axios.get('http://localhost:3000/infos');
}
},
async mounted() {
await this.getAll();
}
为什么name
是作为道具发送并用于服务模板的,undefined
是为什么?我该如何解决?
答案 0 :(得分:1)
我完全不了解Pug,但似乎您需要使用v-bind
语法,就像您要在属性值内插补道具或数据的其他任何地方一样
a.list-group-item.list-group-item(:id="`list${name}-list`" :href="`#list-${name}`" data-toggle="list" role="tab" aria-controls=name) {{ name }}
请参见https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
我使用过template literals,但您也可以恢复为串联,例如
a(:id="'list' + name + '-list'" ...
我还至少要初始化response
来拥有一个空的data
数组,这样您就不会尝试在初始显示时迭代undefined
,即
return {
response: {
data: []
}
}