고유별 Vue JS v-for 필터

고유별 Vue JS v-for 필터

우리 회사는 Angular JS에서 Vue로 이전합니다.Angular 필터의 기능을 VueJ에 복제할 필요가 있을 때까지 매우 원활했습니다.원래 Angular 필터는 다음과 같이 생겼습니다.

JS

app.filter('unique', function () {
    return function (collection, keyname) {
        var output = [],
            keys = [];

        angular.forEach(collection, function (item) {
            var key = item[keyname];
            if (keys.indexOf(key) === -1) {
                keys.push(key);
                output.push(item);
            }
        });

        return output;
    };
});

내 Vue에는 다음이 있습니다.

<select class="u-full-width" v-model="newPost.cat">
   <option value="" selected="selected">Choose a Category</option>
   <option v-for="post in posts | unique" selected>{{ post.cat }}</option>
</select>

필터는 그대로 사용할 수 있을 것 같습니다만, 어떻게 하면 복제할 수 있을까요?

여기서 계산된 속성을 사용해야 합니다.Vue의 필터는 작성자가 말한 바와 같이 주로 텍스트 변환을 위한 것입니다(물론 규칙은 아니지만 계산된 속성을 사용합니다).

컴포넌트:

  computed: {
    uniquePosts: function() {
      var output = [];
      var keys   = [];

      this.posts.forEach(function (post) {
          var key = post[keyname];

          if (keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(post);
          }
      });

      return output;
    }
  }

그리고.v-for그uniquePosts템플릿에 추가해 주세요.

편집: 통과하려면keyname:

computed: {
   uniquePosts: function () {
      var vm = this;
      return function (keyname) {
         var output = [];
         var keys   = [];

         vm.posts.forEach(function (post) {
             var key = post[keyname];

             if (keys.indexOf(key) === -1) {
                 keys.push(key);
                 output.push(post);
             }
         });

         return output;
      };
   }
}

그리고 전화하면 된다.uniquePosts(keyname).

EDIT2: 변수 이름 수정했습니다. 죄송합니다.

Tomasz의 답변을 개선하기 위해 main에서 글로벌 믹스인을 정의할 수 있습니다.js:

Vue.mixin({
  computed: {
    unique () {
      return function (arr, key) {
        var output = []
        var usedKeys = {}
        for (var i = 0; i < arr.length; i++) {
          if (!usedKeys[arr[i][key]]) {
            usedKeys[arr[i][key]] = true
            output.push(arr[i])
          }
        }
        return output
      }
    }
  }
})

컴포넌트 중 하나에서 필터링할 어레이와 필터링할 속성을 전달합니다.

<option v-for="post in unique(posts, 'cat')" selected>{{ post.cat }}</option>

개체를 사용하여 추가된 고유 키를 확인하는 것이 다음보다 효율적입니다.indexOf어레이를 검색해야 합니다.Vue 문서에서 권장하는 대로 글로벌 믹스인을 사용하는 대신 플러그인을 만들 수도 있습니다.

언급URL : https://stackoverflow.com/questions/42845338/vue-js-v-for-filter-by-unique