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
0👍
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
0👍
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>
0👍
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++ ;
}
},
}
})