vue.js при нажатии возвращает случайный выбор из массива - PullRequest
Новая
       7

vue.js при нажатии возвращает случайный выбор из массива

0 голосов
/ 24 августа 2018

Я пытаюсь получить один случайный элемент из массива записей, как только пользователь нажмет кнопку.Но я не могу заставить его работать.Единственная ошибка, которую я получаю: «Свойство или метод« Победитель »не определен в экземпляре, но на него ссылаются во время рендеринга»

Я предполагаю, что функция не работает и присваивает значение победителю?Может кто-нибудь сообщить мне, где я иду не так?

Код компонента ниже 

<template>
    <div class="container-flex">
        <div class="wrapper">

            <div class="entries">

                <div class="entries__header">

                    <div class="entries__header__title">
                        <p>Competition Entries</p>
                    </div>

                    <div class="entries__header__search">
                        <input 
                            type="text" 
                            name="Search" 
                            class="input input--search" 
                            placeholder="Search..." 
                            v-model="search">
                    </div>
                </div>

                <div class="entries__content">
                    <ul class="entries__content__list">
                        <li v-for="entry in filteredEntries">
                            {{ entry.name }} 
                        </li>

                        <li class="winner">{{ winner }}</li>
                    </ul>
                </div>


                <add-entry :entries.sync="entries"/>

            </div>

            <button 
                @click="pickWinner">Pick Winner</button>

        </div>
    </div>
</template>

<script>

import addEntry from '@/components/add-entry.vue'

export default {
    name: 'entry-list',
    components: {
        addEntry
    },
    data: function() {

        return {
            search: '',
            entries: [
                {
                    name: 'Geoff'
                },
                {
                    name: 'Stu'
                },
                {
                    name: 'Craig'
                },
                {
                    name: 'Mark'
                },
                {
                    name: 'Zoe'
                }
            ],

        }
    },
    methods: {
        pickWinner() {
            winner: this.entries[Math.floor(Math.random() * this.entries.length)]
        }
    },
    computed: {
        filteredEntries() {
            if(this.search === '') return this.entries
            return this.entries.filter(entry => {
                return entry.name.toLowerCase().includes(this.search.toLowerCase())
            })   
        }
    }
}

</script>

1 Ответ

0 голосов
/ 24 августа 2018

Я бы установил свойство с именем winnerId и вычисленное winner и обновил бы его 

data: function() {
    return {
        winnerId: null,
        // ...
    }
},
methods: {
    pickWinner() {
        this.winnerId = Math.floor(Math.random() * this.entries.length)
    }
},
computed: {
    winner() {
         return this.entries[this.winnerId] || null;
    }
}

, вам может понадобиться добавить дополнительную проверку ошибок, например, в шаблоне, если this.winnerId равно нулю, не показывайте или в вычисленном значении, если winnerId равно нулю, запустите this.pickWinner() или любую другую дополнительную логику, которая вам нужна.

...