在 vuejs 2 中替换 filterby

Question

我正在使用带有 vue js 的 django。我正在学习 vue js 的教程，他们使用的是 vuejs 1，而我想使用 vuejs 2。

如何将此语句从 vuejs1 更改为 vuejs2？

v-for=" (story,index) in stories | filterBy 'Alex' in 'writer "

这是我的全部代码。我正在使用 Django，所以请注意花括号被替换为 [[ value ]].

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Learning Vue</title>
    <link href="/static/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

</head>
<body>

<div class="container">
    <h1>Let's hear some stories!</h1>
    <div>
        <h3>Alex's Stories</h3>
        <ul class="list-group">
            <li v-for=" (story,index) in stories | filterBy 'Alex' in 'writer " class="list-group-item">
                 [[index+1]]. [[ story.writer ]] said "[[ story.plot ]]"
            </li>
        </ul>
    </div>
    <div>
        <h3>John's Stories</h3>
        <ul class="list-group">
            <li v-for=" (story,index) in stories | filterBy 'Alex' in 'writer " class="list-group-item">
                 [[index+1]]. [[ story.writer ]] said "[[ story.plot ]]"
            </li>
        </ul>
    </div>
    <pre>
            [[ $data | json ]]
    </pre>
</div>

</body>





<script src="/static/vendor/vue.js"></script>
<script>

    new Vue({
        delimiters: ["[[", "]]"],
        el:'.container',
        data:{
            stories:   [
                {
                    plot:'I crashed my car today!',
                    writer: 'Alex'
                },
                {
                    plot:'Yesterday,someone stole my bag!',
                    writer:'John'
                },
                {
                    plot: 'Someone ate my chocolate...',
                    writer: 'John'
                },
                {
                    plot: "I ate someone's chocolate!",
                    writer:'Alex'
                }
            ]
        }
    })
</script>
</html>

Answer 1

您可以创建一个方法来 return 筛选列表。

这是一个例子

var app = new Vue({
    el: '#app',
    data: {
        numbers: [ 1, 2, 3, 4, 5 ]
    },
    methods: {
        even: function (numbers) {
            return numbers.filter(function (number) {
                // your custom logic here
                return number % 2 === 0
            })
        }
    }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="n in even(numbers)">{{ n }}</li>
  </ul>
</div>

在 vuejs 2 中替换 filterby

Replacement for filterby in vuejs 2

django

vue.js

vuejs2