Question

我正在尝试根据select值将表单发送给某些操作。

我有这样的模板：

<template>
    <form method="post" :action="myRoute" ref="myForm">
        <select @change="entitySelected" v-model="selected">
            <!-- -->
        </select>
    </form>
</template>

我正在尝试在出现新的select值时动态地设置表单操作：

<script>
    export default {
        data() {
            return {
                selected: '',
            }
        },
        computed: {
            myRoute: function () {
                return 'example.com/'+this.selected
            }
        },
        methods: {
            entitySelected(event) {
                console.log(this.$refs.myForm.action) //<- action is 'example.com' without selected value
                console.log(this.selected) //<- this value is as expected
                this.$refs.myForm.submit()
            }
        }
    }
</script>

怎么了？

P。 S.浏览器-Firefox

Answer 1

可能不是最好的方法，但是它可行：

userSelected(event) {
    this.$nextTick(function () {
        this.$refs.backdoor.submit()
    })
}

Answer 2

您可以在更新所选值时使用setAttribute()

this.$refs.myForm.setAttribute('action', this.myRoute);

使用计算属性动态设置表单操作

2 个答案: