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

时间:2019-08-19 22:16:02

标签: vue.js pug

我有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是为什么?我该如何解决?

1 个答案:

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