Question

学习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'},
            ],
        }
    })

但这只会输出一个空表。

如何仅输出一张表及其行？

Answer 1

您应该将朋友传递给朋友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>

Vue.js只输出一张表和几行

1 个答案: