お世話になります。
現在Vue.jsを勉強中で、ドキュメントに目を通しています。
スロットの説明で理解できない部分があります。
どなたかご教示いただけると大変ありがたいです。
不明点
ガイドのスロットの章「その他の例」の説明に関してなのですが、この部分の説明は「isCompleteがtrueのタスクに関しては先頭に✓をつける」というUIの操作を、親コンポーネントから行っているケースだと解釈しています。
ここで、親コンポーネントの<template v-slot:todo="{ todo }">
の{ todo }
の記述の部分が、同じドキュメント内でも説明のあるスロットプロパティであると認識しています。
html
1<todo-list v-bind:todos="todos"> 2 <template v-slot:todo="{ todo }"> 3 <span v-if="todo.isComplete">✓</span> 4 {{ todo.text }} 5 </template> 6</todo-list>
スロットプロパティの説明では
すべてのスロットプロパティを保持するオブジェクトの名前を slotProps にしましたが、あなたの好きな名前を使うことができます。
とあるので、ドキュメントのコードを動く形にし、自分の好きなスロットプロパティ名に変更してみたところ、エラーで画面が真っ白になってしまいました。
※コード内がtodoだらけでどこになんの値が反映されているのか分かりずらかったので、変更できる部分は変更してみようと思ったのが発端です
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Vue Document</title> 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 9 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 10</head> 11<body> 12 13 <div id="app"> 14 15 16 <todo-list v-bind:todos="todos"> 17 <template v-slot:todo="{ acceptAnySlotPropertyName }"><!-- スロットプロパティの名前はなんでも良いはず --> 18 <span v-if="acceptAnySlotPropertyName.isComplete">✓</span> 19 {{ acceptAnySlotPropertyName.text }} 20 </template> 21 </todo-list> 22 </div> 23 24 25 <script> 26 Vue.component('todo-list', { 27 data: function(){ 28 return { 29 filteredTodos: [ 30 { id: '1', text: 'ID1のテキスト', isComplete: true }, 31 { id: '2', text: 'ID2のテキスト', isComplete: false }, 32 { id: '3', text: 'ID3のテキスト', isComplete: true } 33 ] 34 } 35 }, 36 props:['todos'], 37 template: ` 38 <ul> 39 <li 40 v-for="todo in filteredTodos" 41 v-bind:key="todo.id" 42 > 43 <slot name="todo" v-bind:todo="todo"> 44 <!-- フォールバックコンテンツ --> 45 {{ todo.text }} 46 </slot> 47 </li> 48 </ul> 49 ` 50 }); 51 52 new Vue({ 53 el: '#app', 54 data: { 55 todos: [ 56 { }, 57 { }, 58 { } 59 ] 60 } 61 }) 62</script> 63</body> 64</html>
コンソールのエラー内容は下記になります。
console
1[Vue warn]: Error in render: "TypeError: Cannot read property 'isComplete' of undefined" 2 3vue.js:1897 TypeError: Cannot read property 'isComplete' of undefined 4 at fn (eval at createFunction (vue.js:11649), <anonymous>:3:194) 5 at normalized (vue.js:2597) 6 at Proxy.renderSlot (vue.js:2693) 7 at eval (eval at createFunction (vue.js:11649), <anonymous>:3:91) 8 at Proxy.renderList (vue.js:2637) 9 at Proxy.eval (eval at createFunction (vue.js:11649), <anonymous>:3:27) 10 at VueComponent.Vue._render (vue.js:3551) 11 at VueComponent.updateComponent (vue.js:4067) 12 at Watcher.get (vue.js:4478) 13 at new Watcher (vue.js:4467)
スロットプロパティの文言と小コンポーネントでバインドしている属性名を一致させると期待通りの表示になるのですが、それだと「好きな名前を使うことができます」というドキュメントの説明と一致しないため疑問に思い質問させていただきました。
そもそもの理解として間違っている部分がありましたらご指摘いただけると幸いです。
何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/01 01:11 編集
2020/02/01 03:53