小编Evg*_*kiy的帖子

我尝试将属性和一些数据绑定到我的模板,但下面的代码不起作用.我需要的是渲染n个模板取决于printForms对象的数量,并在每个模板数据中实现来自适当的对象.请提出任何想法我的代码有什么问题.

PS我在控制台中警告如下:[Vue警告]:评估表达式"printedForm.docNumber"时出错:TypeError:无法读取未定义的属性'docNumber'(在组件中找到:)

 <div id="app">
  <printing-form v-for="printedForm in printedForms" track-by="id"></printing-form>
 </div>

 <template id="printingForm-template">
   <img v-bind="printedForm.attributes">
   <div>{{ printedForm.docNumber }}</div>
 </template>

我的VueJs代码如下:

Vue.component('printing-form', {
  template: '#printingForm-template'
});

new Vue({
  el: '#app',
  data: {
    printedForms: [
      {
        id: 1,
        docNumber: 7,
        attributes: {
          src: '/waybill/img/4p_bus.png',
          width: 1400,
          height: 980
        }
      },
      {
        id: 2,
        docNumber: 7777,
        attributes: {
          src: '/waybill/img/4p_cargo.png',
          width: 1400,
          height: 980
        }
      },
      {
        id: 3,
        docNumber: 10000,
        attributes: {
          src: '/waybill/img/4p_selfMove.png',
          width: 1400,
          height: 980
        }
      }
    ]
  }
});

我有一个问题是将模型中的数据填充到代码中,而不仅仅是一个带有单独数据的模板.我需要的是第一个模板渲染的次数与firstFormDetails数组中的对象数量相同,而第二个模板的数量相同.我的代码示例如下:

 <div id="app">
  <first v-for="item in secondFormDetails" track-by="id"></first>
  <second v-for="item in firstFormDetails" track-by="id"></second>
 </div>

 <template id="template-first">
  <div> {{ item.docNumber }}</div>
 </template>

 <template id="template-second">
  <div> {{ item.docNumber }}</div>
 </template>

而VueJs模块如下:

  Vue.component('first', {
     template: '#template-first',
     data: function() {
       return {
         firstFormDetails: [
           {docNumber: 7},
           {docNumber: 7777},
           {docNumber: 10000}
         ]
       }
     }
   });

   Vue.component('second', {
      template: '#template-second',
      data: function() {
        return {
          secondFormDetails: [
            {docNumber: 1908},
            {docNumber: 7777},
            {docNumber: 10000}
          ]
        }
      }
    });

   new Vue({
     el: '#app'
   });

我有几个组件的应用程序。我使用Vuex来存储数据，因此可以在不同的组件中使用它。现在，我需要使用v-for渲染一些div。我做如下：

VueX /模块/shows.js

const state = {
 shows: [
  {
   name: 'Hard Luck',
   venue: 'The Venue',
   time: '6:00 pm'
  },
  {
   name: 'Hard Luck',
   venue: 'The Venue',
   time: '6:00 pm'
  }
 ]
}

export default {
 state
}

我需要使用数据的组件：

  <template>
   <div class="dashboard__details dashboard__details--shows"
      v-for="show in shows">
    <h3 class="dashboard__name">
       {{show.name}} @ {{show.venue}}      
     </h3>
     <span class="dashboard__time">{{show.time}}</span>
     <div class="dashboard__btnBlock">
       <button">Details</button>
     </div>
    </div>
   </template>

   <script>
   import { mapState } from 'vuex'
   import ReportIssue from './ReportIssue'
   import InviteFriend from './InviteFriend'

   export default {
     name: 'dashboard', …