在 vuejs 中渲染一个组件

Question

我正在尝试渲染组件，但出现错误：属性或方法 "joke" 未定义在未在实例上定义但在渲染期间被引用。我正在使用老爸的笑话 api 通过 axios http 库获取数据。这是我的代码：

var joke = Vue.component('joke', {
  template: '#joke',
  data() {
    return {
      jokes: []
    };
  },
  created() {
    axios
      .get('https://icanhazdadjoke.com/search', {
        headers: {
          Accept: 'application/json'
        },
        params: {
          limit: 30
        }
      })
      .then(response => {
        this.jokes = response.data.results;
      });
  }
});

new Vue({
  el: '#main'
});

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>vue Dad JOkes</title>
    <!--styles-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <!--scripts-->
    <script src="https://unpkg.com/vue@2.1.10/dist/vue.js" charset="utf-8"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="main">
      <joke></joke>
    </div>
    <template id="joke">
      <ul>
        <li v-for="joke in jokes"></li>
        <p>{{joke.joke}}</p>
      </ul>

    </template>


    <script src = "app.js" charset="utf-8"></script>
  </body>
 
  </html>

Answer 1

这是 html 的一个简单问题，您在使用 {{joke}}

之前已经结束了 </li>

改变

<ul>
  <li v-for="joke in jokes"></li>
  <p>{{joke.joke}}</p>
</ul>

到

<ul>
  <li v-for="joke in jokes">
    <p>{{joke.joke}}</p>
  </li>
</ul>

这是您的工作示例：

var joke = Vue.component('joke', {
  template: '#joke',
  data() {
    return {
      jokes: []
    };
  },
  created() {
    axios
      .get('https://icanhazdadjoke.com/search', {
        headers: {
          Accept: 'application/json'
        },
        params: {
          limit: 30
        }
      })
      .then(response => {
        this.jokes = response.data.results;
      });
  }
});

new Vue({
  el: '#main'
});

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>vue Dad JOkes</title>
    <!--styles-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <!--scripts-->
    <script src="https://unpkg.com/vue@2.1.10/dist/vue.js" charset="utf-8"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="main">
      <joke></joke>
    </div>
    <template id="joke">
      <ul>
        <li v-for="joke in jokes">
          <p>{{joke.joke}}</p>
        </li>
      </ul>

    </template>


    <script src = "app.js" charset="utf-8"></script>
  </body>
 
  </html>

在 vuejs 中渲染一个组件

Rendering a component in vuejs

vue.js

axios