时间戳

首页 > 解决方案 > 使用计算属性动态设置表单操作

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

问题描述

我正在尝试根据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>

怎么了？

PS 浏览器 - 火狐

标签： vuejs2

解决方案

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

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

推荐阅读