Как проверить форму с помощью ref в Vue Composition API

Question

С Options API, Я проверил свою форму следующим образом:

шаблон:

<v-form ref="form" v-model="valid" lazy-validation @submit.prevent>
...

сценарий:

methods: {
  validate() {
    this.$refs.form.validate();
    ...
  }
}

Теперь с новым Composition API, как я могу позвонить validate() по форме?

Answer 1

Сначала настройте ссылку на шаблон, объявивrefс тем же именем, что и в шаблоне (1ï¸ âƒ £). Затем вернитеvalidate метод из вашего setup() (2ï¸ âƒ £):

<template>
  <v-form ref="myForm">...</v-form>
</template>

<script>
import { ref } from '@vue/composition-api'

export default {
  setup() {
    const myForm = ref(null)  // 1️⃣

    return {
      myForm, // 1️⃣

      validate() { // 2️⃣
        myForm.value.validate()
      },
    }
  }
}
</script>

Answer 2

Вы можете получить доступ к этой ссылке через context который является вторым параметром setup функция:

<v-form ref="form" v-model="valid" lazy-validation @submit.prevent="validate">

сценарий:

export default {
  setup(props,context) {
    functions validate() { 
       context.refs.form.validate()
      }

    return {
       validate
    }
  }
}

или разрушить этот контекст внутри параметра:

export default {
  setup(props,{refs}) {
    functions validate() { 
      refs.form.validate()
      }

    return {
       validate
    }
  }
}