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

Question

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>

Sergeon · Accepted Answer · 2019-10-14 20:04:12Z

1

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.

answered Oct 14, 2019 at 20:04

Sergeon

6,7982 gold badges29 silver badges44 bronze badges

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

2 Comments

toto333 Over a year ago

Wow amazing, thank you. Just for curiosity, what happends if the select variable is a prop?

Sergeon Over a year ago

Check this article about mutating props: michaelnthiessen.com/avoid-mutating-prop-directly

Simon Thiel · Accepted Answer · 2019-10-14 19:46:07Z

0

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);
}

answered Oct 14, 2019 at 19:46

Simon Thiel

3,3356 gold badges30 silver badges50 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related