现有站点上的 Vue.js 问题

Question

I'm new to Vue and trying to learn by integrating little bits in an existing site using <script> rather than going down the whole Vue rabbit hole.

I'm trying to make Vue Bootstrap Typeahead work by running one of the demos on my site but I keep getting the error: Cannot read property 'length' of undefined . The input field is rendered, but not with the appended button, placeholder, etc., and the thing doesn't work!

Here is my code:

<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);
            }
        },
    });

The the field is <vue-bootstrap-typeahead />

Can anyone point me in the right direction?

Answer 1

Cannot read property 'length' of undefined means that somehow the undefined value has gotten to a place, where array was expected instead. In this case it means that the <vue-bootstrap-typeahead> is getting undefined via its props, where it expects an array (which is the data prop). But you are passing users there, so how is the error possible?

Even though you are "having users array in the data", it is the data of your vue instance where you have them, not the data of your vue component itself. And your component has no way of knowing about that data. You would need to either define the data and perform fetching of the data in the component itself (like you can see in the base example here: https://v2.vuejs.org/v2/guide/components.html ), or alternatively pass the data from the app to your component via props to make it work.