javascript - VueJs - 将输入绑定(bind)到 url 参数

Question

我想在 vue.js 中将输入字段绑定(bind)到路由参数。

<input v-model="$route.params.query"/>

这可能吗？

Answer 1

我发现的最直接的方法如下:

<input v-model="foo" />

--

data() {
    return {
        foo: this.$route.query.foo
    };
},
watch: {
    foo(newVal) {
        this.$router.push({ query: { ...this.$route.query, foo: newVal } });
    },
    '$route.query.foo': function(val) {
        this.foo = val;
    }
}

编辑 2019-08-16:添加了对 $route 的监视以对返回导航使用react。