时间戳

首页 > 解决方案 > 如何在 vue 组件中使用另一个方法的变量？

vue.js - 如何在 vue 组件中使用另一个方法的变量？

问题描述

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

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

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

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

我的组件.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>

标签： vue.js

解决方案

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

实际上，v-model 比仅仅“写入”到一个变量要复杂一些，但重要的是在你的模板中你正在设置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变量是组件 prop，则不应立即执行此操作，因为 prop 不打算由子组件直接修改。如果是这种情况，请使用更多信息更新您的问题。

推荐阅读