0

我对 Vue.js 比较陌生，现在我想在我的 Laravel 应用程序中安装这个插件vue-chat-scroll，但它会抛出这个错误：

[Vue 警告]：无法解析指令：chat-scroll

（在 [ChatLog] 中找到）

我跑npm install --save vue-chat-scroll成功了。
我package.json有插件的实体：

"dependencies": {    
    "laravel-echo": "^1.3.0",
    "pusher-js": "^4.1.0",
    "vue-chat-scroll": "^1.1.1"
}

在bootstrap.js我添加了自述文件中描述的 2 行。

window.Vue = require('vue');

import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll);


window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

在我的ChatLog.vue我添加了v-chat-scroll指令。

<template lang="html">
<div class="chat-log" v-chat-scroll>
    <chat-message v-for="message in messages" :message="message"></chat-message>
</div>
</template>

<script >
export default{
    props: ['messages']

}
</script>

我错过了什么？

4

1 回答 1

1

使用单个文件组件时，您必须在组件本身内部定义需求。

尝试这个：

<script >
import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

export default{
    props: ['messages']
}
</script>

这很烦人，但幸运的是 webpack 会优化掉双重需求，或者如果这是你唯一需要它的地方，你可以从 bootstrap.js 中删除它

于 2017-05-16T01:59:20.640 回答