お世話になります。
現在、公式ガイドを見ながらVue.jsを勉強中なのですが、
下記URLの算出プロパティの章で躓いてしまい質問させていただきました。
算出プロパティとウォッチャ
下記は、ガイドにあるdataオブジェクトのプロパティを、computed内で参照している例なのですが、
dataが配列の場合はどのようにcomputed内で参照すればよいのか?というところで躓いております。
html
1<div id="demo">{{ fullName }}</div>
javascript
1var vm = new Vue({ 2 el: '#demo', 3 data: { 4 firstName: 'Foo', 5 lastName: 'Bar' 6 }, 7 computed: { 8 fullName: function () { 9 return this.firstName + ' ' + this.lastName 10 } 11 } 12})
下記は、今回やりたいことを簡単にしたサンプルなのですが、
dataが以下のような配列の場合は、どのようにすれば、fullNameを表示させられますでしょうか?
html
1<div id='demo'> 2 <ul v-for="user in users"> 3 <li>姓:{{ user.lastName }}</li> 4 <li>名:{{ user.firstName }}</li> 5 <li>フルネーム:{{ user.fullName }} ← これを表示させたい</li> 6 </ul> 7</div>
javascript
1<script> 2 var User = function(lastName, firstName) { 3 this.lastName = lastName; 4 this.firstName = firstName; 5 }; 6 var users = []; 7 users.push(new User('小室','哲哉')); 8 users.push(new User('小林','武士')); 9 10 var vm02 = new Vue({ 11 el: '#demo', 12 data: { 13 users: users 14 }, 15 computed: { 16 fullName: function () { 17 return this.firstName + ' ' + this.lastName 18 } 19 } 20 }); 21</script>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/31 01:54