Question

我的组件中遇到v-for的问题..

码

  <modal v-if="showModal" @close="showModal = false">
    <h1 slot="header">
      {{modalData.title}}
    </h1>
    <p slot="body">
      {{modalData.assignee}} <!-- works -->
      <div v-for="a in modalData.assignee"> 
        <p>Testing v-for iterate</p> <!-- does not display -->
      </div>
    </p>
  </modal>

modalData.assignee的值是

[ { "id": 4, "username": "testUser" } ]

这正是{{modalData.assignee}}所显示的内容，但我没有看到消息Testing v-for iterate。

modalData.title也会正确显示。

我做错了什么？

我注意到直接分配用户名也解决了问题。

this.$root.$on('modalEvent', function(event) {
  this.showModal = true;
  this.modalData = event;
  this.modalData.assignee = this.modalData.assignee[0].username //works
}),

Answer 1

问题似乎是由于标记无效。

<p>标记不应包含其他块级子标记。变化

<p slot="body">

到

<div slot="body">

或任何其他有效元素，一切正常。

演示〜https://jsfiddle.net/efa0u103/

v-不显示内容

1 个答案: