Estoy usando django con vue js. Estoy siguiendo un tutorial para vue js y han usado vuejs 1 y yo quería usar vuejs 2.

¿Cómo cambiar esta declaración de vuejs1 a vuejs2?

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

Este es mi código completo. Estoy usando django, así que tenga en cuenta que las llaves se reemplazan por [[valor]].

<!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>
0
subha.py 30 nov. 2016 a las 13:51

1 respuesta

La mejor respuesta

Puede crear un método que devolverá la lista filtrada.

Este es un ejemplo

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>
1
Mihai Vilcu 30 nov. 2016 a las 14:41
Devuelve el número% 2 === 0 Quiero que este (2) sea dinámico, ¿qué tengo que hacer para ello? Quiero aquí cualquier número al que llamaré así "n en pares (números, divisor)", el nombre incluso no sería apropiado entonces. Pero eso solucionará mi problema.
 – 
subha.py
30 nov. 2016 a las 14:57
Puede pasarlo como parámetro a su método. Entonces puede tener algo como myFilter: function (param1, param2) { // my logic with param 1 and param2 }, luego en la plantilla lo llama con sus valores.
 – 
Mihai Vilcu
30 nov. 2016 a las 15:06
Lo siento, no entendí, ¿puedes darme un fragmento?
 – 
subha.py
30 nov. 2016 a las 15:12
1
Algo como divisibleBy: function (numbers, divisor) { return numbers.filter(function (number) { return number % divisor === 0 }) } y luego <li v-for="n in divisibleBy(numbers, 4)">{{ n }}</li>
 – 
Mihai Vilcu
30 nov. 2016 a las 15:16