Question

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

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

＆＃13;

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');
    }
  },
});

＆＃13;

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

＆＃13;

Answer 1

您可以将视图模型称为$root，因此您为类别命名的计算值为$root[category.text]。请参阅下面的代码段。

如果您在某个组件中，您将不会拥有特殊的$root变量，并且必须诉诸eval(category.text)。

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

＆＃13;

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');
    }
  },
});

＆＃13;

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

＆＃13;

嵌套循环中的计算属性

1 个答案: