Query strings dynamically updates inputs in form

Greetings!

I'm very new with Vue.js, and i'm stuck with a problem that involves forms and dynamically updates of query strings.

Let's assume that I have a server running in localhost:8000

My index.php have just 2 inputs:

<input name="foo" v-model="foo">
<input name="bar" v-model="bar">

I want that every changes made in inputs FOO and BAR will be reproduced in the query string of my URL.

For example, if I access the page with localhost:8000?foo=Hello my <input name="foo"> automatically populates with the value in my query string.

Here is my code (very simple):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Router - Testing</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1>Vue Router - Query string</h1>
        <hr>
        <input type="text" v-model="foo">
    </div>

    <script>
        const routes = [
            { path: '/' }
        ];

        const router = new VueRouter([
            routes
        ]);

        const app = new Vue({
            router,     
            el: '#app', 
            data: {
                foo: 'foo', 
                bar: 'World', 
            }, 
            mounted() {
                console.log('ok');
                console.log(this.$router.query); // Returns me UNDEFINIED
            }
        });
    </script>
</body>
</html>

Someone can help me? Regards!

cometads

6 years ago

Best Answer

Level 3

Add watchers to foo and bar and then push the new parameters to the router.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Router - Testing</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1>Vue Router - Query string</h1>
        <hr>
        <input type="text" v-model="foo">
        <input type="text" v-model="bar">
    </div>

    <script>
        const routes = [
            { path: '/' }
        ];

        const router = new VueRouter([
            routes
        ]);

        const app = new Vue({
            router,     
            el: '#app', 
            data: {
                foo: 'foo', 
                bar: 'World', 
            }, 
            watch: {
              foo: {
                handler: function() { this.updateUrl() },
                immediate: true
              },
              bar: {
                handler: function() { this.updateUrl() },
                immediate: true
              }
            },
            methods: {
              updateUrl() {
                this.$router.replace({query: {foo: this.foo, bar: this.bar}})
              }
            },
            mounted() {
                console.log('ok');
                console.log(this.$router.query); // Returns me UNDEFINIED
            }
        });
    </script>
</body>
</html>

Note: I did not test this using vue-router's browser history mode. If I'm not mistaken, that would cause a page reload on every replace. If this is the case, you can use window.history to directly manipulate the history state.

pedroroccon

6 years ago

Level 10

@cometads It works!

I'm developing a real time application with some filters, and I want to pass the query strings in my URL to my variables inside Vue.js.

Thanks for helping me!

Please or to participate in this conversation.