属性中的动态变量被视为未定义

Question

我有 2 个 vue 组件。一个父组件：list of services 存储了许多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？我该如何解决这个问题？

Answer 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: []
  }
}