Как проверить форму с ref в Vue Composition API - PullRequest
Новая
       126

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

3 голосов
/ 06 августа 2020

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

шаблон: 

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

сценарий: 

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

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

Ответы [ 2 ]

3 голосов
/ 06 августа 2020

Сначала настройте свой шаблон ref , объявив 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>

Редактировать методы привязки с помощью Vue Composition API

1 голос
/ 06 августа 2020

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

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

script: 

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