Question

我的公司正从Angular JS转到Vue。在我需要将Angular过滤器的功能复制到VueJS之前，它一直非常流畅。原始的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>

我认为我仍然可以使用相同的过滤器，但我该如何复制呢？

Answer 1

您应该在此处使用计算属性。如创建者所述，Vue中的过滤器主要用于文本转换（当然不是规则，但我仍然使用计算属性）。

在您的组件上：

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)

您可以致电<!DOCTYPE html> <html> <head> <title>Client Search Results</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <form id="contact" action="" method="get"> <fieldset> <h4>Search For Client</h4> <input name="term" placeholder="Enter Name Here" type="text"> </fieldset> <fieldset> <button type="submit">Search</button> </fieldset> </form> </div> <div class='container'> <form id='contact' action='edit.php' method='post'> <fieldset> <h4>Search Results</h4> <select size="5" style="width:100%" name='id' > <?php // Database Connection String include("../../comm/comm.php"); $con = mysql_connect($DB_HOST,$DB_USER,$DB_PASS); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db($DB_NAME, $con); //Retrieve The Searched Term and Display The Results if (!empty($_GET['term'])) { $term = mysql_real_escape_string($_GET['term']); $sql = "SELECT * FROM client WHERE firstname LIKE '%".$term."%'"; $r_query = mysql_query($sql); while ($row = mysql_fetch_array($r_query)) { echo "<option"; echo " value='"; echo "".$row['client_id']; echo"'>"; echo "".$row['firstname']; echo " ".$row['lastname']; echo " - ".$row['city']; echo " ,".$row['state']; echo "</option>"; }} ?> </select> </fieldset> <fieldset> <button type='submit' name='submit'>View Selection</button> </fieldset> </form> <div> </body> </html>。

EDIT2：修正了变量名称，抱歉

Answer 2

改善Tomasz＆＃39;回答，您可以在main.js中定义global mixin：

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文档推荐的那样使用全局mixin。

Vue JS v-for过滤器的独特之处

2 个答案: