[Vuejs]-How to pass props to form in another component in Vue

2👍

What methods did you try?

I see two possibilities:

  1. set a property in the parent component
  2. use vuex

the clickRouter-method would set the property and then bind it in the input-field.

Update:

index.js (router):

import Vue from "vue";
import Router from "vue-router";
import register from "@/components/register";

Vue.use(Router);

const router = new Router({
    routes: [
        {
            path: "/register",
            name: "register",
            component: register
        }
    ]
});
export default router;

App.vue:

<template>
    <div id="app">
        <header>
            <button @click.stop.prevent:="clickRouter(path)">Go to register</button>
        </header>
        <main>
            <router-view></router-view>
        </main>
    </div>
</template>

<script>
    export default {
        name: "app",
        data () {
            return {
                path: '/register',
                prefill: ''
            }
        },
        methods: {
            clickRouter(link) {
                this.prefill = 42;
                this.$router.push({ path: link, query: { plan: 'private' }});
            }
        }
    }
</script>

register.vue:

<template>
    <input <input type="text" name="" :value="prefill">
</template>

<script>
    export default {
        computed: {
            prefill() {
                return this.$parent.prefill;
            }
        }
    }
</script>

Leave a comment