Vue.js-如何在数组对象上实现计算属性？

Question

我的Vue实例中有一个对象数组，对于每个项目，我想编写一个Computed属性。

每个对象只有两个属性：firstName和lastName。我想为每个命名的“ fullName”编写一个Compute属性，这只是firstNameand 的串联lastName。

我熟悉实现Vue实例的数据对象属性的计算属性，但是当涉及到数组元素时，我会感到困惑。

目前，我的代码是这样的：

var app = new Vue({
  el: '#app',
  data: {
    names: [{
        firstName: 'Mike',
        lastName: 'McDonald',
        done: false
      },
      {
        firstName: 'Alex',
        lastName: 'Nemeth',
        done: false
      },
      {
        firstName: 'Nate',
        lastName: 'Kostansek',
        done: true
      },
      {
        firstName: 'Ivan',
        lastName: 'Wyrsta',
        done: true
      }
    ]
  },
  computed: {
    fullName: function(name) {
      return name.lastName + ', ' + name.firstName;
    }      
  }
  methods: {
    toggle: function(name) {
      name.done = !name.done;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
  <ol>
    <li v-for='name in names'>
      <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
      <span v-if='!name.done'>{{ fullName(name) }}</span>
      <del v-else>{{ fullName(name) }}</del>
    </li>
  </ol>
</div>

这是各自的jsFiddle

Answer 1

在您的情况下，可以使用fullname方法代替computed属性：

var app = new Vue({
  el: '#app',
  data: {
    names: [{
        firstName: 'Mike',
        lastName: 'McDonald',
        done: false
      },
      {
        firstName: 'Alex',
        lastName: 'Nemeth',
        done: false
      },
      {
        firstName: 'Nate',
        lastName: 'Kostansek',
        done: true
      },
      {
        firstName: 'Ivan',
        lastName: 'Wyrsta',
        done: true
      }
    ]
  },
  computed: {

  },
  methods: {
    fullName: function(name) {
      return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
      name.done = !name.done;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
  <ol>
    <li v-for='name in names'>
      <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
      <span v-if='!name.done'>{{ fullName(name) }}</span>
      <del v-else>{{ fullName(name) }}</del>
    </li>
  </ol>
</div>

另一种解决方案是names通过连接firstname和遍历计算属性内的数组lastname，然后返回此数组并在模板中遍历

var app = new Vue({
  el: '#app',
  data: {
    names: [{
        firstName: 'Mike',
        lastName: 'McDonald',
        done: false
      },
      {
        firstName: 'Alex',
        lastName: 'Nemeth',
        done: false
      },
      {
        firstName: 'Nate',
        lastName: 'Kostansek',
        done: true
      },
      {
        firstName: 'Ivan',
        lastName: 'Wyrsta',
        done: true
      }
    ]
  },
  computed: {
    fullNames() {
      return this.names.map(name => {
        let fl = {};
        fl.fname = name.firstName + ", " + name.lastName;
        fl.done = name.done;
        return fl;
      })
    }
  },
  methods: {
    fullName: function(name) {
      return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
      name.done = !name.done;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
  <ol>
    <li v-for='name in fullNames'>
      <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
      <span v-if='!name.done'>{{ name.fname }}</span>
      <del v-else>{{  name.fname  }}</del>
    </li>
  </ol>
</div>