首页 文章

每个计算属性的Vue

提问于
浏览 次
0

可能有一个非常简单的解决方案，但我似乎无法让它正常工作 . 我正在使用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模板的脚本部分中，我创建了一个计算属性“fullAddress”，如：

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 =“items”是所有道具的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>
vue.js vuetify.js computed-properties

1 回答

  • 1

    感谢您扩展您的问题 .

    你可以't do: you can't有一个计算数组，因为计算机与数据项没有关联，它们与组件相关联 . 你建议写它的方式，计算器必须为每个 item 有一个不同的 this . 但它的 this 是组件 .

    您可以创建一个基于 items 的计算器，该计算器返回 items 中的每个值，并使用您为该项计算的 fullAddress 值进行扩充 . 请注意，您应该注意不要修改原始 item ;我使用 Object.assign 来创建一个新副本 .

    然后将计算数组传递给v表而不是传递 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>
    回复于

相关问题