Question

我想将输入字段绑定到vue.js中的路由参数。

<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 } });
    }
}

Answer 2

已经过去了一段时间，但是自docs说起“使用计算属性而不是命令式监视回调通常是一个更好的主意” 我成功测试过的这种模式，看起来也更优雅，恕我直言。

想法是使用通过显式computed和get方法链接到查询参数的set属性，并将带有v-model的输入绑定到该属性。

因此在您的模板中：

<input v-model="query_param"/>

然后在您的计算属性中：

computed: {
  query_param: {
      get() {
        return this.$route.query.your_query_param
      },
      set(value) {
        /*  Here I use replace so that you're not actually 
        pushing a new page to the history stack */

        this.$router.replace({  
          query: { your_query_param: value }
        })
      }
    }
}

这当然适用于单个查询参数。如果您有多个输入要绑定到不同的参数，只需以相同的方式放置其他计算的属性即可。

Answer 3

是的，有可能。在我的代码中，我有一个<select>元素，我想要将所选值附加到url作为查询。所以，我这样做了：
我之前的网址是：

本地主机：8080 /书籍

<select class="form-control" v-on:change="appendQueryToUrl" v-model="filterData.genre">

methods: {
      appendQueryToUrl() {
          this.$router.push({query: {genre: this.filterData.genre}})
      }
}

其中流派是我的关键，this.filterData.genre是我的本地对象值。现在我的网址看起来像：

本地主机：8080 /书籍/音乐风格=电脑的

如果有任何错误，请通知我。

VueJs - 将输入绑定到url param

3 个答案: