Question

我正在商店中调用一个操作以将数据发送到API。调用是通过@click中的FormComponent中的按钮触发的：

<button type="button" @click="$store.dispatch('saveStoreDatas')">Click me</button>

如何提交按钮的父表单（省略的代码）？我不能使用ref，因为它位于组件内部。

谢谢！

Answer 1

您是否需要发送操作并提交表单？通常，您只需将表单数据存储在商店中，然后在操作中将其发送。

如果您确实需要提交表单，请在子组件中发出一个事件，并在父组件中侦听该事件。

子组件将像这样。

<!-- child component template -->
<button type="button" @click="handleClick">Click me</button>

// child component script
methods: {
    handleClick () {
        this.$store.dispatch('saveStoreDatas')
        this.$emit('clickSubmit')
    }
}

这是它的父母。

<!-- parent template -->
<form ref="form">
    <child-component @clickSubmit="submitForm">
</form>

// parent component script
methods: {
    submitForm () {
        this.$refs.form.submit()
    }
}

Answer 2

为点击处理程序添加单独的功能：

<button type="button" @click.prevent="submitToStore">Click me</button>
...
...
methods () {
  submitToStore () {
    // refs can be used here - get your form data and send it to the store
    let formData = this.$refs.myForm.data()
    this.$store.dispatch('saveStoreDatas', formData)
    ...
  }
  ...
}

希望这会有所帮助。

Answer 3

只需使用 ;

属性@click="$store.dispatch('saveStoreDatas');$emit('clickSubmit')"

<button type="button" @click="$store.dispatch('saveStoreDatas');$emit('clickSubmit')">Click me</button>

如何从VueX商店触发组件内部的表单

3 个答案: