vue.js - Vue.js / Algolia - 调试

Question

寻求帮助调试我一直盯着 3 天的一些代码。它是 Vue.js / Laravel / Algolia。我觉得我的模型中某处有错误，但我看不到让它启动。有什么建议么？提前致谢。：

<input type="text" v-model="name" v-on:keyup="search" debounce="500">
<div id="results">
    <article v-for="user in users">
        <h2>@{{ user.name }}</h2>
    </article>
</div>

和：

new Vue({

        el: '#results',

        data: {

                query: '',
                users: [] 

    },

        ready: function()  {

              this.client = algoliasearch('myKey', 'myKey');
              this.index = this.client.initIndex('getstarted_actors');



        },


        methods: {

            search: function() {

                this.index.search(this.query, function(error, results) {

                    this.users = results.hits;

         }.bind(this));

            }

        }

    });

Answer 1

对未来的一个小提示。为了在 Vue.js 中调试，我建议您使用 chrome 扩展。

它将允许查看警告、错误并检查您的组件。

它仅适用于 Vue.js 的非缩小版本。

https://github.com/vuejs/vue-devtools

Answer 2

我不知道这是否是您遇到的错误，但是：
您的 v-model 超出了您的 vue 实例的范围。
尝试将其放在#results div 中：

<div id="results">
    <input type="text" v-model="name" v-on:keyup="search" debounce="500" />
    <article v-for="user in users">
        <h2>@{{ user.name }}</h2>
    </article>
</div>

编辑 vue 实例中的数据

data: {

        query: '',
        users: [],
        name: ''

}