这个问题可能有一个非常简单的解决办法,但我似乎无法让它正常工作。我正在使用Vuetify数据表循环并显示我的所有属性,但是当我使用计算属性时它似乎无法正常工作。我试图将一些道具(街道,城市,州,拉链)组合成计算地址道具。因此,当我单独使用每个道具时,它的工作原理如下:
<td class="text-xs-center">{{ props.item.street }}</td>
<td class="text-xs-center">{{ props.item.city }}</td>
<td class="text-xs-center">{{ props.item.state }}</td>
<td class="text-xs-center">{{ props.item.zip }}</td>
但是,如果在我的Vue模板的脚本部分中,我创建了一个计算属性&#34; fullAddress&#34;像:
computed: {
fullAddress () {
return this.street & '\n' & this.city & ', ' & this.state & ' ' & this.zip
}
}
然后在上面的模板中使用它,如:
<td class="text-xs-center">{{ props.item.fullAddress() }}</td>
根本不起作用。我也尝试了很多其他方法来写出来但没有任何效果。我是Vue的新手以及它如何使用计算属性,所以我确信我只是不理解它是如何正常工作的。
编辑:我正在使用Vuetify数据表来遍历我的数据。我正在使用他们的文档来显示表格。就像我说的,我是Vue的新手,所以我想把这一切都搞清楚。我相信:items =&#34; items&#34;是所有道具的v-bind(类似于v-for循环?)。以下是Vuetify对一个非常简单的数据表的更完整的例子:
<template>
<v-data-table
:headers="headers"
:items="items"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.street }}</td>
<td class="text-xs-right">{{ props.item.city }}</td>
<td class="text-xs-right">{{ props.item.state }}</td>
<td class="text-xs-right">{{ props.item.zip }}</td>
</template>
</v-data-table>
</template>
<script>
export default {
data () {
return {
headers: [
{
text: 'Name',
sortable: false,
value: 'name'
},
{ text: 'Street', value: 'street' },
{ text: 'City', value: 'city' },
{ text: 'State', value: 'state' },
{ text: 'Zip Code', value: 'zip' }
],
items: [
{
name: 'Braums',
street: '159 W Elm St',
city: 'St. Louis',
state: 'MO',
zip: 83607
},
{
name: 'McDonalds',
street: '237 N Cup Way',
city: 'Dallas',
state: 'TX',
zip: 47621
}
]
}
}
}
</script>
答案 0 :(得分:2)
感谢您扩展您的问题。
您不能做的事情:您不能拥有计算数组,因为计算机与数据项无关,它们与组件相关联。您提议编写它的方式,计算出的每个this
必须有不同的item
。但它的this
是组件。
您可以根据items
创建计算结果,该计算结果会返回items
中为您为该项计算的fullAddress
值增加的每个值。请注意,您应该注意不要修改原始item
;我使用Object.assign
创建新副本。
然后将计算出的数组传递给v-table,而不是传递items
。
我只是将新变量插入到街道的位置以显示它有效。
Vue.use(Vuetify);
new Vue({
el: '#app',
data() {
return {
headers: [{
text: 'Name',
sortable: false,
value: 'name'
},
{
text: 'Street',
value: 'street'
},
{
text: 'City',
value: 'city'
},
{
text: 'State',
value: 'state'
},
{
text: 'Zip Code',
value: 'zip'
}
],
items: [{
name: 'Braums',
street: '159 W Elm St',
city: 'St. Louis',
state: 'MO',
zip: 83607
},
{
name: 'McDonalds',
street: '237 N Cup Way',
city: 'Dallas',
state: 'TX',
zip: 47621
}
]
}
},
computed: {
itemsWithFullAddress() {
// This creates a new empty object, copies the item into it,
// then calculates `fullAddress` and copies that entry into it
return this.items.map((obj) => Object.assign({}, obj, {
fullAddress: `${obj.street}\n${obj.city}, ${obj.state} ${obj.zip}`
}));
}
}
});
<link href="//unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<script src="//unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-data-table :headers="headers" :items="itemsWithFullAddress" hide-actions class="elevation-1">
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.fullAddress }}</td>
<td class="text-xs-right">{{ props.item.city }}</td>
<td class="text-xs-right">{{ props.item.state }}</td>
<td class="text-xs-right">{{ props.item.zip }}</td>
</template>
</v-data-table>
</div>