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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/06 02:25