Vuejs2 更新v-for循环中的特定组件-Vue js-laravel 5.6

我正在努力找到解决这个问题的方法：我将Vue.js与Laravel 5.6一起使用，获取项目，然后使用Vue显示它们

单击此项目的出价按钮时，我想使用bidOnThis（id）方法更新该

列表项目内的数据，例如具有ref属性totalBids的元素

编辑：更新代码以反映ref属性和更新但仍然错误的bidonth此（id）功能

<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';
        }
    }
};

---

在进行了大量搜索后，我发现：

并在我的v-for循环中使用键、索引更新了我的代码，然后通过该方法引用键 允许我使用键引用正确的元素

bidOnThis（auction.id，key）

及

this.$refs.totalBids[key].innerHTML=parseInt（this.$refs.totalBids[key].innerHTML）+1

请参阅下面的完整代码：

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


0


{{auction.name}（{{auction.id}}）

{{auction.bid_time}}

{{auction.total_bids}}

{{auction.username}}

对这个项目投标


导出默认值{
数据（）{
返回{
拍卖：[]，
新ID:“”，
总出价：''，
测试：“”
};
},
创建（）{
get（'/auctions'）。然后（result=>{
this.auctions=result.data
})
},
方法：{
双月本（id，键）{
post（'/auctions'，{id:id}）；
this.$refs.totalBids[key].innerHTML=parseInt（this.$refs.totalBids[key].innerHTML）+1；
}
}
};

v-model用于输入，为什么在
span
，
按钮上使用它？我使用它是因为我认为我是引用元素的一种方式，还有什么可以用于引用？谢谢，所以我会使用类似这样的内容：？我仍然不太了解如何将其应用到函数中
<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 ;
        }
    }
};