CODEWITHSUNDEEP
vue.js
toto333
toto333

Reputation: 79

How to use another method's variable in a vue component?

I have two methods in a vue component.

First makes the user choose from a v-select, either itemone or itemtwo. Then, to retreive the value for later i call @change to assign the variable to a method declared later - getItemValue.

Second is a submit button, when clicked, we go to handleSubmit.

After handleSubmit is called, I want to use the value I got from getItemValue (in variable theItem), but how can I call another method if it's out of my scope?

Mycomponent.vue

<template>
  <v-form
    ref="form"
    v-model="valid"
    lazy-validation
  >
    <v-select
      v-model="select"
      :items="items"
      @change="getItemValue"
    ></v-select>

    <v-btn
      @click="handleSubmit"
    >
      Submit
    </v-btn>
  </v-form>
</template>

<script>
  export default {
    data: () => ({    
      items: [
        'itemone',
        'itemtwo'
      ],
    }),
    methods: {
        getItemValue(theItem) {

        },
        handleSubmit(e) {
            e.preventDefault()
            // i need "theItem" here!
        }
    },
  }
</script>

Upvotes: 2

Views: 544

Answers (2)

Sergeon
Sergeon

Reputation: 6788

v-model already writes to your local variable, so there is absolutely no need to setup a get method to write the select value to a variable.

Actually, v-model is a bit more complicated than just 'write' to a variable, but the important bit is that in your template you are setting up v-model="select", which basically means that whenever the user uses the select to pick a value, your local select variable will be updated with the selected value.

Now, there is no select in your example component data, I don't know why. But if you had it, you could just sent that variable in your handleSubmit:

<template>
  <v-form
    ref="form"
    v-model="valid"
    lazy-validation
  >
    <v-select
      v-model="select"
      :items="items"
    ></v-select>

    <v-btn
      @click="handleSubmit"
    >
      Submit
    </v-btn>
  </v-form>
</template>

<script>
  export default {
    data: () => ({
      select: '',
      items: [
        'itemone',
        'itemtwo'
      ],
    }),
    methods: {
        handleSubmit(e) {
            e.preventDefault()
            doSomethingWith(this.select); // this will be updated at this point
            // with the option the user selected
        }
    },
  }
</script>

Now, however, be aware that if the select variable is a component prop, then you should not do this right away, since props are not intended to be modified directly by child components. If that would be the case, please update your question with more info.

Upvotes: 1

Simon Thiel
Simon Thiel

Reputation: 3285

You would simple set the variable (theItem) value to the data

getItemValue(theItem) {
  this.theItem;
},

and then retrieve it later

handleSubmit(e) {
e.preventDefault()
  // i need "theItem" here!
  // simple access theItem
  console.log('theItem', this.theItem);
}

Upvotes: 0

Related Questions