Vue JS passing variable names and using them

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

You are trying to dynamically change items with the same method. This can be done but with finding items in an array and values. Just create seperate methods and attach the click to each button. — Michael Mano
– Michael Mano, Commented Nov 29, 2019 at 1:52

Arc · Accepted Answer · 2019-11-29 03:39:26Z

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

edited Nov 29, 2019 at 3:39

answered Nov 29, 2019 at 1:37

Arc

1,0867 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

jacob13smith Over a year ago

So you just copy my answer and post it yourself?

user1170117 Over a year ago

Thank you both for the help. However how do I pass my variable under this.id???

Arc Over a year ago

To access this.id, you'll have to have it in your data. Inside the methods, "this" will refer to your data. You have inventory set up that way now.

user1170117 Over a year ago

Hi @Arc I am still confused on this. so right now this.id returns null what I am trying to do is convert this.id to this.clearance or this.floor and return the number. if I type this.clearnace in short i want this.id to be programmatic. Maybe I explained it wrong I apologize.

Arc Over a year ago

Well you're passing id as an argument, so you don't need "this.id" but just "id". What exactly should id be referencing? Where does it come from?

|

jacob13smith · Accepted Answer · 2019-11-29 01:37:22Z

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

edited Nov 29, 2019 at 1:37

answered Nov 29, 2019 at 1:34

jacob13smith

9295 silver badges12 bronze badges

4 Comments

Arc Over a year ago

You're missing the return, so this data property is not properly reactive.

Michael Mano Over a year ago

Also this only applies after the initial vue setup. The way he has done it is fine.

Arc Over a year ago

@MichaelMano Can you explain that? If you don't return an object, then all data properties will be referencing each other in every component. How is it different prior to set up?

Michael Mano Over a year ago

@Arc sure, 012.vuejs.org/guide/best-practices.html the second code block. See how its only an object and not a function that returns an object? This is fine when you are using new Vue however inside of any child components its required to be a function that returns an object.

Michael Mano · Accepted Answer · 2019-11-29 02:02:53Z

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>

Unfortunately I was trying to avoid this because there will be a lot of locations. I was trying to create two dynamic methods.
ok then change the way your data is setup and find the id as a KEY. I will update

user1170117 · Accepted Answer · 2019-12-03 00:18:14Z

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

    }
    })

Collectives™ on Stack Overflow

Vue JS passing variable names and using them

4 Answers 4

8 Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related