现有站点上的 Vue.js 问题

Question

我是 Vue 的新手，并试图通过使用<script>在现有站点中集成一点点来学习，而不是深入整个 Vue 兔子洞。

我试图通过在我的网站上运行其中一个演示来使 Vue Bootstrap Typeahead 工作，但我不断收到错误： Cannot read property 'length' of undefined 。 输入字段被渲染，但没有附加按钮，占位符等，并且事情不起作用！

这是我的代码：

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/vue-bootstrap-typeahead/dist/VueBootstrapTypeahead.css" rel="stylesheet">
<script src="https://unpkg.com/vue-bootstrap-typeahead"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src='https://unpkg.com/underscore'></script>
<script>
    Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead, {
        template: ```
<div>
  <vue-bootstrap-typeahead
    class="mb-4"
    v-model="query"
    :data="users"
    :serializer="item => item.login"
    placeholder="Search GitHub Users"
    prepend="Username:"
    @hit="searchRepositories"
  >

<template slot="append">
  <button @click="searchRepositories" class="btn btn-primary">
  Search
  </button>
</template>

<template slot="suggestion" slot-scope="{ data, htmlText }">
  <div class="d-flex align-items-center">
    <img
      class="rounded-circle"
      :src="data.avatar_url"
      style="width: 40px; height: 40px;" />

    <span class="ml-4" v-html="htmlText"></span>
  </div>
</template>
</vue-bootstrap-typeahead>
</div>```
    });

    window.app = new Vue({
        el: '#app',
        data() {
            return {
                query: '',
                userRepositories: {},
                users: []
            }
        },
        methods: {
            searchUsers(newQuery) {
                axios.get('https://api.github.com/search/users?q=${newQuery}').then(res => {
                    this.users = res.data.items;
                });
            },
            searchRepositories() {
                axios.get('https://api.github.com/search/repositories?q=user:${this.query}').then(res => {
                    this.userRepositories = res.data;
                });
            }
        },
        watch: {
            query: _.debounce(function (newQuery) {this.searchUsers(newQuery);}, 250)
        },
        filters: {
            stringify(value) {
                return JSON.stringify(value, null, 2);
            }
        },
    });

该字段是<vue-bootstrap-typeahead />

谁能指出我正确的方向？

Answer 1

Cannot read property 'length' of undefined意味着undefined的值以某种方式到达了预期数组的位置。 在这种情况下，这意味着<vue-bootstrap-typeahead>通过其 props 变得undefined ，它需要一个数组（即data prop）。 但是你在那里传递users ，那么错误怎么可能呢？

即使您“在数据中有users数组”，它也是您拥有它们的 vue 实例的数据，而不是您的 vue 组件本身的数据。 而且您的组件无法知道这些数据。 您需要定义数据并在组件本身中执行数据获取（如您可以在此处的基本示例中看到： https://v2.vuejs.org/v2/guide/components.html ），或者通过道具将数据从应用程序传递到您的组件以使其工作。