Vueの別のコンポーネントでフォームを作るために小道具を渡す方法

Question

$ router.push経由であらかじめ定義されたフォームデータを何とか渡そうとしているので、そのリンクをクリックすると、あらかじめ定義されたデータ/フォームをdropdrownのように入力するか、入力フォームにデータを渡してください

私は別の方法を試しましたが、何も問題なく動作しました。私はデータを渡したい別のVueのコンポーネントで

入力：

<input type="text" name="" value=""> 

クリックしてルータ：

<ul> 
    <li @click="clickRouter(path)"> Click here </li> 
</ul> 

data() { 
    return { 
     path: '/products', 
    }; 
    }, 
    methods: { 
    clickRouter(link) { 
     this.$router.push(link); 
    }, 
    }, 

更新：

// with query, resulting in /register?plan=private 
router.push({ path: 'register', query: { plan: 'private' }}) 

： Programmatic Navigationによると、あなたはこれを行うことができます

今このURLは？plan = private私は何かできるようにしたいlike /register?name=Myname

これはコンポーネントに入力された名前をあらかじめ入力します。

乾杯

Answer 1

どのような方法を試しましたか？

私は二つの可能性を参照

：

1. が
2. 使用vuex

がclickRouter -methodのプロパティを設定し、input -fieldでそれを結合する親コンポーネントにプロパティを設定します。

更新：

index.js（ルータ）：

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>