Vue.js只輸出一張表和幾行
[英]Vuejs output only one table and several rows
問題描述
學習Vue：
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> </style> </head> <body> <div id="app"> <friends v-for="friend in friends" :friend="friend"></friends> </div> <script> Vue.component('friends', { props : ['friend'], template : `<table> <tr><td>{{ friend.fname }}</td><td>{{ friend.lname }}</td></tr> </table>`, }) const vm = new Vue({ el : '#app', data : { friends : [ {fname : 'Cornelius', lname : 'Johnson'}, {fname : 'John', lname : 'Waybe'}, {fname : 'Neo', lname : 'Anderson'}, ], } }) </script> </body> </html>
這可以正常工作，但是它輸出多個表而不是一個表及其行。
我嘗試過這樣的事情
<div id="app">
<friends></friends>
</div>
Vue.component('friends', {
props : ['friends'],
template : `<table>
<tr v-for="friend in friends" :friend="friend"><td>{{ friend.fname }}</td><td>{{ friend.lname }}</td></tr>
</table>`,
});
const vm = new Vue({
el : '#app',
data : {
friends : [
{fname : 'Cornelius', lname : 'Johnson'},
{fname : 'John', lname : 'Waybe'},
{fname : 'Neo', lname : 'Anderson'},
],
}
})
但這只是輸出一個空表。
如何僅輸出一個表及其行？
1 個解決方案
解決方案1
2 已采納 2019-05-06 23:52:16
您應該將朋友傳遞給朋友prop =）。
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> </style> </head> <body> <div id="app"> <friends :friends="friends"></friends> </div> <script> Vue.component('friends', { props : ['friends'], template : `<table> <tr v-for="friend in friends"><td>{{ friend.fname }}</td><td>{{ friend.lname }}</td></tr> </table>`, }) const vm = new Vue({ el : '#app', data : { friends : [ {fname : 'Cornelius', lname : 'Johnson'}, {fname : 'John', lname : 'Waybe'}, {fname : 'Neo', lname : 'Anderson'}, ], } }) </script> </body> </html>
使用 vuejs 過濾表行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.