Установить действие формы динамически, используя вычисляемое свойство

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>

Что не так?

PS Браузер - Firefox

Answer 1

Вы можете использовать setAttribute() при обновлении выбранного значения:

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

Answer 2

Наверное, не самый лучший способ, но он работает:

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