vue.js on click return random selection from array

Question

I am trying to get one random item from an array of entries once the user has click a button. But I can't seem to get it working. The only error I get is "Property or method "winner" is not defined on the instance but referenced during render"

I'm guessing is because the function isn't running and assigning the value to winner? Can someone let me know where I'm going wrong?

Component code below

<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>

You don't have winner property in your data object. Also your pickWinner() function seems wrong — Phiter
– Phiter, Commented Aug 24, 2018 at 19:53

Daniel · Accepted Answer · 2018-08-24 19:57:06Z

1

I would set up a property called winnerId and a computed winner and update it

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

you may need to add some extra error checking still, such as in the template, if this.winnerId is null, don't bother showing, or in the computed value, if the winnerId is null, run this.pickWinner(), or whatever other additional logic you need.

answered Aug 24, 2018 at 19:57

Daniel

36k17 gold badges115 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js on click return random selection from array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related