orderBy로 v-repeat을 필터할 때 $index로 루트의 데이터를 업데이트하려고 시도할 때 원하지 않는 대상을 얻습니다.그래서 필기를 했습니다.

할 일

콘텐츠를 배열한 각 대상v-repeat

사용orderBy 데이터 시간의 내림차순으로 표시

index.html

<div id="list">
  <ul>
    <li v-repeat="content in contents | orderBy 'dateTime' true">
      index: {{$index}} - id: {{content.id}} - {{content.memo}} - {{content.dateTime}}
      <button v-on="click : outputIndex(this)">button</button>
    </li>
  </ul>
</div>

index.js

var List = new Vue({
  el: '#list',
  data: {
    contents: [
      {id: 1, memo: 'memo 1', dateTime: '2015/9/10'},
      {id: 2, memo: 'memo 2', dateTime: '2015/9/11'},
      {id: 3, memo: 'memo 3', dateTime: '2015/9/12'},
      {id: 4, memo: 'memo 4', dateTime: '2015/9/13'},
      {id: 5, memo: 'memo 5', dateTime: '2015/9/14'},
      {id: 6, memo: 'memo 6', dateTime: '2015/9/15'}
    ]
  },
  methods: {
    outputIndex: function (item) {
      // targetVMの$index
      console.log('index: ' + item.$index);
      // targetVMのid
      console.log('id (targetVM): ' + item.content.id);
      // targetVMの$indexでイベントが起きた1件のオブジェクトを検索
      console.log('id (this.contents): ' + this.contents[item.$index].id)

    }
})

button click

TargetVM은 id: 1의 대상이지만 $index를 뿌리에서 사용하지 않으려는 대상을 얻었습니다.orderBy에서 하위 실례를 정렬할 때 콘텐츠의 배열이 정렬되지 않기 때문에 $index에서 얻은 값과 일치하지 않습니다.

발생한 문제

업데이트$set() 등의 방법으로 의도하지 않은 대상의 데이터를 업데이트합니다.index에 의존하는 처리가 부정확하게 작용했다.

해결책

독특한 id 검색 콘텐츠로 정확한 index 얻기

var list = new Vue({
  el: '#list',
  data: {
    contents: [
      {id: 1, memo: 'memo 1', dateTime: '2015/9/10'},
      {id: 2, memo: 'memo 2', dateTime: '2015/9/11'},
      {id: 3, memo: 'memo 3', dateTime: '2015/9/12'},
      {id: 4, memo: 'memo 4', dateTime: '2015/9/13'},
      {id: 5, memo: 'memo 5', dateTime: '2015/9/14'},
      {id: 6, memo: 'memo 6', dateTime: '2015/9/15'},
    ]
  },
  methods: {

    outputIdx: function (item) {
      var id = item.content.id;
      var idx = this.findById(id)

      console.log('index: ' + item.$index);
      console.log('id (targetVM): ' + item.content.id);
      console.log('id (this.contents): ' + this.contents[item.$index].id)

      console.log('正しいindex: ' + idx);
      console.log('targetVMのid:' + id);
    },

    // idを渡して正しいindexを取得するメソッド
    findById: function (id) {
      for (var i = 0; i < this.contents.length; i++ ) {
        if (this.contents[i].id === id) {
          return i
        }
      }
    }
  }
})

독학으로 프로그래밍 아저씨가 내놓은 해결책이야.
더 좋은 해결 방법이 있다면 지적해 주세요.