Vue.js 如何在vue组件中使用其他方法的变量？

我在vue组件中有两种方法

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

第二个是提交按钮，单击后，我们进入handleSubmit

调用handleSubmit后，我想使用变量ItItem中从getItemValue获得的值，但是如果它不在我的范围内，我如何调用另一个方法呢

Mycomponent.vue

---

您只需将变量ITEEM值设置为数据

getItemValue(theItem) {
  this.theItem;
},

然后稍后再检索它

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

v-model已经写入局部变量，因此绝对不需要设置get方法将select值写入变量

，但重要的一点是，在模板中设置v-model=select，这基本上意味着每当用户使用select选择一个值时，您的本地select变量都将使用所选的值进行更新

现在，在您的示例组件数据中没有select，我不知道为什么。但是如果你有它，你可以在handleSubmit中发送这个变量：

---

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

哇，太棒了，谢谢。出于好奇，如果select变量是一个道具，会发生什么？请查看这篇关于变异道具的文章：

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

<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>