java渲染vue代码_VueJs渲染模板问题

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

{{ item.docNumber }}

{{ item.docNumber }}

而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'

});