質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

1回答

1727閲覧

[vue]親から子に値が渡せない

austr

総合スコア36

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2020/08/10 07:18

編集2022/01/12 10:55

# やりたいこと
親から子のコンポーネントに値を渡したい。

やったこと

Vue.jsでコンポーネント親子間の値の受け渡し - Qiitaを参考に実施

<template> <div> <b-button v-b-modal.modal-prevent-closing message="Hello Vue!!" >Open Modal</b-button > <ModalComponent /> </div> </template> <script> import ModalComponent from "@/components/Modal.vue"; export default { name: "ViewModal", components: { ModalComponent, }, data() { return { reqUrl: "htto://localhost:8080/test", }; }, methods: {}, }; </script> <style lang="scss"> .chart-view { height: 450px; width: 450px; } </style>

<template> <b-modal id="modal-prevent-closing" ref="modal" title="Submit Your Name" @show="resetModal" @hidden="resetModal" @ok="handleOk" > <p>{{ message }}</p> <form ref="form" @submit.stop.prevent="handleSubmit"> <b-form-group :state="nameState" label="Name" label-for="name-input" invalid-feedback="Name is required" > <b-form-input id="name-input" v-model="name" :state="nameState" required ></b-form-input> </b-form-group> </form> </b-modal> </template> <script> export default { name: "ModalComponent", props: ["message"], data() { return { name: "", nameState: null, submittedNames: [], }; }, methods: { checkFormValidity() { const valid = this.$refs.form.checkValidity(); this.nameState = valid; return valid; }, resetModal() { this.name = ""; this.nameState = null; }, handleOk(bvModalEvt) { // Prevent modal from closing bvModalEvt.preventDefault(); // Trigger submit handler this.handleSubmit(); }, handleSubmit() { // Exit when the form isn't valid if (!this.checkFormValidity()) { return; } // Push the name to submitted names this.submittedNames.push(this.name); console.log(this.submittedNames); console.log(this.reqUrl); // Hide the modal manually this.$nextTick(() => { this.$bvModal.hide("modal-prevent-closing"); }); }, }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>

事象

Messageに何も値が表示されず、エラー何も表示されないので、何が悪いのかがわかりません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

propsは渡したコンポーネントに対して記述します。

diff

1<template> 2 <div> 3-- <b-button v-b-modal.modal-prevent-closing message="Hello Vue!!" 4++ <b-button b-b-modal.modal-prevent-closing 5 >Open Modal</b-button 6 > 7-- <ModalComponent /> 8++ <ModalComponent message="Hello Vue!!" /> 9 </div> 10</template> 11 12<script> 13import ModalComponent from "@/components/Modal.vue"; 14 15export default { 16 name: "ViewModal", 17 components: { 18 ModalComponent, 19 }, 20 data() { 21 return { 22 reqUrl: "htto://localhost:8080/test", 23 }; 24 }, 25 methods: {}, 26}; 27</script> 28 29<style lang="scss"> 30.chart-view { 31 height: 450px; 32 width: 450px; 33} 34</style>

投稿2020/08/21 16:43

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問