Question

我有以下代码：

  <tr v-for="item in companies">
        <td>{{ item.name }}</td>
  </tr>

公司内容示例：

    companies:Array[30]
0:Object
address:Object
dateOfCreation:"2008-02-11T00:00:00"
dateOfDissolution:null
liquidated:null
name:"BBC LIMITED"
number:"06500244"
officerSummary:null

1:Object
address:Object
dateOfCreation:"2011-02-07T00:00:00"
dateOfDissolution:null
liquidated:null
name:"BBC AND CO LIMITED"
number:"07520089"
officerSummary:null

哪个有效，但是我想将我的item对象传递给子组件：

    <company v-for="item in companies" :company="item"></company>

子组件非常简单：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class CompanyComponent extends Vue {
    props: ['company'];

}

和

<template>

    <div>
       Does it work?

        {{ company.name }}
        </div>
</template>

<script src="./company.ts"></script>

但是返回的标记是以下30个：

<div company="[object Object]">
   Does it work?
    </div>

很明显它循环了30次，但没有传递物体。

现在只有在我删除{{ company.name }}时才会呈现，当我包含我得到的内容时：渲染函数出错：＆＃34; TypeError：无法读取属性＆＃39; name＆＃39;未定义＆＃34; 我认为是因为该对象实际上并未通过。

那么为什么我得到[Object object]以及为什么我的对象没有正确传递？

Answer 1

在隔离的设置中，您所描述的问题不会发生问题必须存在于您未显示的代码或数据中。

Vue.component('company', {
  props: ['company'],
  template: '<div>name: {{company.name}}</div>'
});

const app = new Vue({
  el: '#app',
  data: {
    companies: [{
      name: 'foo'
    }, {
      name: 'bar'
    }]
  }
});

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <company v-for="item in companies" :company="item" :key="item.name"></company>
</div>

foreach组件中的Vue JS Object Object

1 个答案: