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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

2207閲覧

Vuejsの親子データバインドとデータ送信について

supermaruetsu

総合スコア148

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2017/05/29 09:51

編集2017/05/29 09:55

Vuejsの親子コンポーネントにおいて子コンポーネントへのデータバインドと、子コンポーネントからのデータ送信の方法が分かりません。親はブログのリストで、子はひとつひとつのブログポストとなるように設計したいです。
子に付属する「Like」ボタンを押すことでblog_idがpost送信され、controllerへ繋がるように作りたいのですが、不明点が2つあります。

1.子コンポーネントにあるbuttonへのデータバインド方法
2.子コンポーネントからのblog_id送信方法

下記のコードは、親がAPIからのデータを取得し、子へデータを送っている状態です。子コンポーネントのボタンが今回Postしたいblog_idをpost送信させるLikeボタンになります。
よろしくお願いいたします。

parant.vue

<template> <ul class="col-md-10 col-lg-10"> <child v-for="child in childList" :child-blog-id="child.id" :child-blog-title="child.title" :child-blog-content="child.blog_content"> </child> </ul> </template> <script> import child from './child.vue'; import axios from 'axios'; export default { name: 'childs', components: { child }, data: function() { return { childList : [], } }, created: function() { //api取得 }, methods: { Like: function(child_id) { axios.post('/api/like/'+ child_id) .then(function (response) { }) .catch(function (error) { alert(error); }); } } } </script>

child.vue

<template> <li> <p><b>{{ChildBlogTitle}}</b></p> <p><b>{{ChildBlogContent}}</b></p> <button type="button" class="btn btn-success">Like</button> </li> </template> <script> export default { props: ['ChildBlogId','ChildBlogTitle','ChildBlogContent'], } </script>

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

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

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

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

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

guest

回答2

0

ベストアンサー

自分で書いててあれですが、v-on使ったほうがVueJSのお作法にあってるかもしれません

具体的には(変更部分のみ)
parent.vue

<child v-for="data in childList" :child-blog-id="data['child-blog-id']" :child-blog-title="data['child-blog-title']" :child-blog-content="data['child-blog-content']" v-on:like="Like" >

&created部分不要

child.vue

btnClick() { this.$emit('like', this.ChildBlogId); }

という感じです
https://jp.vuejs.org/v2/guide/components.html#カスタムイベントとの-v-on-の使用

投稿2017/06/02 10:40

rururu3

総合スコア5545

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

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

supermaruetsu

2017/07/06 02:25

BAが遅くなり申し訳ございません。大変参考になりました!!
guest

0

$emitを利用するとしたら、

parant.vue

<template> <ul class="col-md-10 col-lg-10"> <child v-for="data in childList" :child-blog-id="data['child-blog-id']" :child-blog-title="data['child-blog-title']" :child-blog-content="data['child-blog-content']" > </child> </ul> </template> <script> import child from './child.vue'; import axios from 'axios'; export default { name: 'childs', components: { child }, data: function() { return { childList : [ { "child-blog-id": 100, "child-blog-title": "title1", "child-blog-content": "content1", }, { "child-blog-id": 101, "child-blog-title": "title2", "child-blog-content": "content2", }, ], } }, created: function() { //api取得 }, methods: { Like: function(child_id) { axios.post('/api/like/'+ child_id) .then(function (response) { }) .catch(function (error) { alert(error); }); } }, created: function() { this.$on('click-id', function(val) { console.log(val); }); }, } </script>

child.vue

<template> <li> <p><b>{{ChildBlogId}}</b></p> <p><b>{{ChildBlogTitle}}</b></p> <p><b>{{ChildBlogContent}}</b></p> <button type="button" class="btn btn-success" @click="btnClick">Like</button> </li> </template> <script> export default { props: ['ChildBlogId','ChildBlogTitle','ChildBlogContent'], methods: { btnClick() { this.$parent.$emit('click-id', this.ChildBlogId); } } } </script>

ボタン押したときに親に通知しております。

投稿2017/06/02 09:24

編集2017/06/02 09:31
rururu3

総合スコア5545

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問