Question

我在vue组件中有两种方法。

首先使用户从v选择中选择itemone或itemtwo。然后，为以后获取值，我调用@change将变量分配给稍后声明的方法-getItemValue。

第二个是提交按钮，单击后，我们转到handleSubmit。

在调用handleSubmit之后，我想使用从getItemValue中获得的值（在变量theItem中），但是如果另一个方法超出了我的范围，该如何调用呢？

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>

Answer 1

v-model已经写入本地变量，因此绝对不需要设置get方法将选择值写入变量。

Actually, v-model is a bit more complicated than just 'write' to a variable，但重要的一点是在模板中您正在设置v-model="select"，这基本上意味着，每当用户使用select来选择值时，本地select变量将使用所选值进行更新。

现在，示例组件select中没有data，我不知道为什么。但是，如果有的话，您可以在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>

现在，请注意，如果select变量是组件道具，则您不应立即执行此操作，因为道具不打算由孩子直接修改组件。如果是这种情况，请使用更多信息更新您的问题。

Answer 2

您只需将变量（theItem）的值设置为数据

getItemValue(theItem) {
  this.theItem;
},

然后再取回

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

如何在vue组件中使用另一种方法的变量？

2 个答案: