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

Question

我有 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 作为 prop 发送并在服务模板中使用是 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: []
  }
}

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

Dynamic variable in attributes seen as undefined

vue.js

pug