Vue JS passing variable names and using them - vue.js

Question

I am trying to build a fairly simple program but maybe I am not really understanding how vue does things.
I need to add inventory to the top and than use it in any of the two options. So when I press + for clearance it removes from Inventory and when I press - it add to inventory until 0.
This works if I create only one with static variables, but since there will be more location I am trying to pass this ID of the location via on-click. I used words but there will be ID in the end. The issue is that I cant get them to work once I pass them. When I console log them I can see them but they still dont work. What am I missing here?
<tr>
<td>New</td>
<td>
<div class="row">
<div class="col">
<h1>#{{ inventory }}</h1>
</div>
<div class="col">
<button type="button" class="btn btn-danger" v-on:click.prevent="addInventory($event, 'inventory')">+</button>
</div>
</div>
</tr>
<tr>
<td>Floor Model</td>
<td>
<div class="row">
<div class="col">
<button type="button" class="btn btn-success" v-on:click.prevent="removeInventory($event, 'floor')">-</button>
</div>
<div class="col">
<h1>#{{ floor }}</h1>
</div>
<div class="col">
<button type="button" class="btn btn-danger" v-on:click.prevent="addInventory($event, 'floor')">+</button>
</div>
</div>
</td>
</tr>
<tr>
<td>Clearance</td>
<td>
<div class="row">
<div class="col">
<button type="button" class="btn btn-success" v-on:click.prevent="removeInventory($event, 'clearance')">-</button>
</div>
<div class="col">
<h1>#{{ clearance }}</h1>
</div>
<div class="col">
<button type="button" class="btn btn-danger" v-on:click.prevent="addInventory($event, 'clearance')">+</button>
</div>
</div>
</td>
</tr>
</tbody>
The Vue Code
<script>
var app = new Vue({
el: '#app',
data: {
inventory: 4,
clearance: 1,
floor: 0,
},
methods: {
addInventory: function (event, id){
if(this.inventory > 0){
this.id++ ;
this.inventory-- ;
console.log(id);
}
},
removeInventory: function (event, id){
if(this.id > 0){
this.id-- ;
this.inventory++ ;
console.log(id);
}
},
}
})
</script>
Thank you

Answer 1

Data must be returned as an object to avoid all components referring to the same data property.
data: () => ({
//properties here
})
or
data: () => {
return {
//properties here
}
}
For setting those values dynamically and avoiding a bunch of methods, look at this example:
https://codepen.io/arcaster42/pen/PooVYVE

Answer 2

Your data field should be a function that returns an object. This solves the problem of all copies of this component accessing the same data:
data() {
return {
inventory: 4,
clearance: 1,
floor: 0,
}
}
Edit: forgot return statement

Answer 3

First there is no point trying to use a single method, You can create multiple which handle it. If you want to use a single method you could but you would be using keys to find which one was selected.
You can also disable the button when a value is at 0, so you wont have to do any if statements inside of that method.
I'm not entirely sure if below is what you are after but it will give you a heads up.
<tbody>
<tr>
<td>New</td>
<td>
<div class="row">
<div class="col">
<h1>#{{ inventory }}</h1>
</div>
<div class="col">
<button
type="button"
class="btn btn-danger"
v-on:click.prevent="addInventory"
>
+
</button>
</div>
</div>
</td>
</tr>
<tr>
<td>Floor Model</td>
<td>
<div class="row">
<div class="col">
<button
type="button"
class="btn btn-success"
:disabled="floor <= 0"
v-on:click.prevent="removeFloorStock"
>
-
</button>
</div>
<div class="col">
<h1>#{{ floor }}</h1>
</div>
<div class="col">
<button
type="button"
class="btn btn-danger"
v-on:click.prevent="addFloorStock"
>
+
</button>
</div>
</div>
</td>
</tr>
<tr>
<td>Clearance</td>
<td>
<div class="row">
<div class="col">
<button
type="button"
class="btn btn-success"
:disabled="clearance <= 0"
v-on:click.prevent="removeClearanceStock"
>
-
</button>
</div>
<div class="col">
<h1>#{{ clearance }}</h1>
</div>
<div class="col">
<button
type="button"
class="btn btn-danger"
v-on:click.prevent="addClearanceStock"
>
+
</button>
</div>
</div>
</td>
</tr>
</tbody>
<script>
var app = new Vue({
el: '#app',
data: {
inventory: 4,
clearance: 1,
floor: 0,
},
methods: {
addFlorStock() {
this.floor = this.floor++;
},
removeFloorStock() {
this.floor = this.floor--;
},
addClearanceStock() {
this.clearance = this.clearance++;
},
removeClearanceStock() {
this.clearance = this.clearance--;
},
addInventory() {
this.inventory = this.inventory++;
},
removeInventory() {
this.inventory = this.inventory--;
},
}
})
</script>

Answer 4

Ok here is the answer I was looking for if anybody else needs it.
In short I wanted the code to work for any number of items in the array.
InventoryTotal is an array like this.
[
{
"id": 16,
"product_id": 504,
"location_id": 1,
"stock": 22,
"status_id": 1,
"created_at": "2019-12-02 00:00:00",
"updated_at": "2019-12-02 00:00:00",
"status": {
"id": 1,
"name": "New Stock"
}
},
{
"id": 17,
"product_id": 504,
"location_id": 2,
"stock": 3,
"status_id": 2,
"created_at": "2019-12-02 00:00:00",
"updated_at": "2019-12-02 00:00:00",
"status": {
"id": 2,
"name": "Clearance"
}
}
]
<td v-text="location.status.name"></td>
<td>
<div class="row">
<div class="col">
<button type="button" v-if="location.status.name != 'New Stock'" class="btn btn-warning" v-on:click.prevent="removeInventory(location.status.name , index , location.stock)">-</button>
</div>
<div class="col">
<h1 v-text="location.stock"></h1>
</div>
<div class="col">
<button type="button" v-if="location.status.name != 'New Stock'" class="btn btn-danger" v-on:click.prevent="addInventory(location.status.name , index , location.stock)">+</button>
</div>
</div>
</tr>
Script
var vm = new Vue({
el: '#app',
data() {
return {
inventoryTotal: '',
}
},
methods: {
addInventory: function (name ,index, item){
if(0 == index){
this.inventoryTotal[0].stock++ ;
}else if(this.inventoryTotal[0].stock > 0){
this.inventoryTotal[0].stock-- ;
this.inventoryTotal[index].stock++ ;
}
},
removeInventory: function (name, index, item){
if(0 == index && this.inventoryTotal[0].stock > 0){
this.inventoryTotal[0].stock-- ;
}else if(this.inventoryTotal[index].stock != 0){
this.inventoryTotal[index].stock-- ;
this.inventoryTotal[0].stock++ ;
}
},
}
})