updating specific component inside v-for loop - Vue js - laravel 5.6

Question

I am struggling to find a solution for this problem: I am using Vue.js with Laravel 5.6 and fetching items then displaying them using Vue.

When clicking on the bid on this item button, i would like to update the data inside that < li > list item, such as the element with the ref property totalBids using the bidOnThis(id) method

Edited: updated the code to reflect ref property and the updated but still wrong bidOnThis(id) function

<template>
<div>
    <ul class="row">
        <li class="col-lg-4" v-for="auction in auctions" :key="auction.id">
            <span>{{ auction.name }} {{ auction.id }}</span><br />
            <span>{{ auction.bid_time }}</span><br />
            <span ref="totalBids">{{ auction.total_bids }}</span><br />
            <span ref="user">{{ auction.username }}</span><br />
            <button ref="newBid" @click="bidOnThis(auction.id)">Bid on this item</button>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    data() {
        return {
            auctions: [],
            newBid: '',
            totalBids: ''
        };
    },
    created() {
        axios.get('/auctions').then(result => {
                this.auctions = result.data
            })

    },
    methods: {
        bidOnThis(id) {
            axios.post('/auctions', { id: id });
            this.auction.totalBids = '100';
        }
    }
};

this is where I am at, but doesn't work either

bidOnThis(id) {
            axios.post('/auctions', { id: id });
            this.auctions.$refs.totalBids.innerHTML = '100';
        }

i used it as i thought i was a way to reference an element, what else would be used to refference? — The-WebGuy
– The-WebGuy, Commented Apr 13, 2018 at 4:06
thanks, so i would use something like: <child-component ref="child-{{ auction.id }}"></child-component>? — The-WebGuy
– The-WebGuy, Commented Apr 13, 2018 at 4:11
I am still not quite grasping how i would apply this into the function — The-WebGuy
– The-WebGuy, Commented Apr 13, 2018 at 4:14

The-WebGuy · Accepted Answer · 2018-04-13 14:42:56Z

After a lot of searching around, i found this: Better method of using refs inside a v-for based on object

and have updated my code using key, index in my v-for loop, then referencing the key through the method allowing me to use the key to reference the correct element

bidOnThis(auction.id, key)

and

this.$refs.totalBids[key].innerHTML = parseInt(this.$refs.totalBids[key].innerHTML) + 1 ;

See full code below:

<template>
<div>
    <h1 ref="testing">0</h1>
    <ul class="row">
        <li class="col-lg-4" v-for="(auction, key, index) in auctions" :key="auction.id">
            <span>{{ auction.name }} ({{ auction.id }})</span><br />
            <span>{{ auction.bid_time }}</span><br />
            <span ref="totalBids">{{ auction.total_bids }}</span><br />
            <span ref="user">{{ auction.username }}</span><br />
            <button ref="newBid" @click="bidOnThis(auction.id, key)">Bid on this item</button>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    data() {
        return {
            auctions: [],
            newBid: '',
            totalBids: '',
            testing: ''
        };
    },
    created() {
        axios.get('/auctions').then(result => {
                this.auctions = result.data
            })

    },
    methods: {
        bidOnThis(id, key) {
            axios.post('/auctions', { id: id });
            this.$refs.totalBids[key].innerHTML = parseInt(this.$refs.totalBids[key].innerHTML) + 1 ;
        }
    }
};

Collectives™ on Stack Overflow

updating specific component inside v-for loop - Vue js - laravel 5.6

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