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

我不知道这是否是您遇到的错误，但是：
您的 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: ''

}

Answer 2

未来的小技巧。为了在 Vue.js 中进行调试，我建议您使用 chrome 扩展。

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

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

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

Vue.js / Algolia - 调试

Vue.js / Algolia - Debugging

vue.js

algolia

laravel-4.2