Vue.js - 어레이 오브젝트에 계산 속성을 구현하는 방법

Vue.js - 어레이 오브젝트에 계산 속성을 구현하는 방법

Vue 인스턴스 내에 개체 배열이 있으며 각 항목에 대해 계산된 속성을 작성하려고 합니다.

각 개체에는 다음 두 가지 속성만 있습니다.firstName그리고.lastName. 나는 이름이 'fullName'인 각각의 Calculated 속성을 쓰고 싶다. 이것은 단지 연결일 뿐이다.firstName그리고.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이 있습니다.

사용할 수 있습니다.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>

'계산'을 매개 변수와 함께 사용할 수 없습니다.대부분의 경우 다음과 같은 방법을 사용합니다.

예

<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(param) {
      return `${this.param} ${this.firstName} ${this.lastName}`
  }
}

언급URL : https://stackoverflow.com/questions/53396969/vue-js-how-to-implement-computed-properties-on-objects-of-array