嵌套循环中的计算属性答案

【问题标题】：Computed properties in nested loop嵌套循环中的计算属性
【发布时间】：2018-03-19 15:45:33
【问题描述】：

我想知道我是否可以根据当前项目访问嵌套循环中的计算属性。至于现在，我通过创建一个获取特定属性的方法来实现它。没有这个额外的方法有没有办法做到这一点？

编辑我更新了我的示例以使其更加清晰。

const vm = new Vue({
  el: '#app',
  data: {
    categories: [
      { id: 0, text: 'zero' },
      { id: 1, text: 'one' },
      { id: 2, text: 'two' },
    ],
    minions: [
      { name: 'A', category: 'zero' },
      { name: 'B', category: 'zero' },
      { name: 'C', category: 'one' },
      { name: 'D', category: 'two' },
    ],
  },
  methods: {
    getComputedData: function (name) {
      return this[name];
    },
  },
  computed: {
    zero: function () {
      return this.minions.filter(({category}) => category === 'zero');
    },
    one: function () {
      return this.minions.filter(({category}) => category === 'one');
    },
    two: function () {
      return this.minions.filter(({category}) => category === 'two');
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>

<div id="app">
  <div
    v-for="category in categories"
  >
    <h1>{{ category.text }}</h1>
    <ul>
      <li
        v-for="minion in getComputedData(category.text)"
      >{{ minion.name }}</li>
    </ul>
  </div>
</div>

【问题讨论】：

在您的情况下，computed 似乎不是必需的，除非您有特定的用例？
嗨@kevguy 有一个sn-p 只是为了说明我在嵌套循环中访问计算属性的意思。正如您所建议的，我根本不需要计算属性。我想知道如果需要的话是否有可能。
@kevguy 我更新了我的示例以便更具体
即使更新了特定用例，computed 仍然不是必需的，只需将 computeds 中的内容放入 getComputedData 方法中即可。因此，也许“嵌套循环中的计算属性”并不是真正的必需品，因为总是可以想到更清洁的解决方案？？
如果我错了，请纠正我：计算的属性被缓存（vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods），如果我只是将computed 中的内容移动到getComputedData，它的行为方式将不同（除非我自己做缓存）。这个问题的目的不是如何更好地解决它，而是在这种情况下是否有可能在不创建额外方法的情况下访问计算属性。

标签： vue.js vuejs2

【解决方案1】：

您可以将视图模型称为$root，因此您为类别命名的计算结果是$root[category.text]。请参阅下面的 sn-p。

如果您在一个组件中，您将没有特殊的 $root 变量，而必须求助于 eval(category.text)。

在任何一种情况下，这里都有代码异味，因为您正在根据数据创建命名对象（并且您的计算大多是重复的代码）。您最好创建一个涵盖所有类别的计算或函数。

const vm = new Vue({
  el: '#app',
  data: {
    categories: [
      { id: 0, text: 'zero' },
      { id: 1, text: 'one' },
      { id: 2, text: 'two' },
    ],
    minions: [
      { name: 'A', category: 'zero' },
      { name: 'B', category: 'zero' },
      { name: 'C', category: 'one' },
      { name: 'D', category: 'two' },
    ],
  },
  computed: {
    zero: function () {
      return this.minions.filter(({category}) => category === 'zero');
    },
    one: function () {
      return this.minions.filter(({category}) => category === 'one');
    },
    two: function () {
      return this.minions.filter(({category}) => category === 'two');
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>

<div id="app">
  <div
    v-for="category in categories"
  >
    <h1>{{ category.text }}</h1>
    <ul>
      <li
        v-for="minion in $root[category.text]"
      >{{ minion.name }}</li>
    </ul>
  </div>
</div>

【讨论】：

谢谢@Roy J。我完全同意你关于代码异味的观点。我只是想看看这样的事情是否可能:)