I need some assistance with my e-commerce platform. I am trying to implement a button that adds items to the shopping cart, but I'm encountering an issue where the value in nbrSeats (my list of values) changes in the data, yet the input field displays a different value.
Here is a snippet of the code snippet: CodePen
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<button @click="create_list()">Create list</button>
<div v-for="(i, index) in nbrSeats" :key="index">
<input
type="number"
max="10"
min="1"
v-model="nbrSeats[index]"
style="width: 60px"
label="Nb. places"
>
</input>
<button @click="nbrSeats[index]++">Add</button>
</div>
<button @click="show()">Show me values</button>
</div>
</template>
<script>
export default {
data() {
return {
nbrSeats: [],
message: 'Welcome to Vue!'
};
},
methods: {
doSomething() {
alert('Hello!');
},
create_list() {
for (var i = 0; i < 10; i++) {
this.nbrSeats.push(1)
}
},
show() {
console.log(this.nbrSeats)
},
}
};
</script>