使用 vue-select 时编译失败
Compilation failing while using vue-select
我正在尝试创建一个简单的 vueJs 项目,并在 webpack/babel 的帮助下编译它。然而,在 运行ning npm 运行 dev 编译项目并启动 vue 服务器时,我得到 Select.vue 模板的编译失败(安装 vue-strap 时安装的 Select.vue),下面是在我的本地端口上加载的确切错误:
Failed to compile.
./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5f7db264","hasScoped":true,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/vue-strap/src/Select.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<div v-el:select :class="classes">
<div class="form-control dropdown-toggle"
:disabled="disabled || !hasParent"
:readonly="readonly"
@click="toggle()"
@keyup.esc="show = false"
>
<span class="btn-content" v-html="loading ? text.loading : showPlaceholder || selected"></span>
<span v-if="clearButton&&values.length" class="close" @click="clear()">×</span>
</div>
<select v-el:sel v-model="value" v-show="show" name="{{name}}" class="secret" :multiple="multiple" :required="required" :readonly="readonly" :disabled="disabled">
<option v-if="required" value=""></option>
<option v-for="option in options" :value="option[optionsValue]||option">{{ option[optionsLabel]||option }}</option>
</select>
<ul class="dropdown-menu">
<template v-if="options.length">
<li v-if="canSearch" class="bs-searchbox">
<input type="text" placeholder="{{searchText||text.search}}" class="form-control" autocomplete="off"
v-el:search
v-model="searchValue"
@keyup.esc="show = false"
/>
<span v-show="searchValue" class="close" @click="clearSearch">×</span>
</li>
<li v-if="required&&!clearButton"><a @mousedown.prevent="clear() && blur()">{{ placeholder || text.notSelected }}</a></li>
<li v-for="option in options | filterBy searchValue" :id="option[optionsValue]||option">
<a @mousedown.prevent="select(option[optionsValue],option)">
<span v-html="option[optionsLabel]||option"></span>
<span class="glyphicon glyphicon-ok check-mark" v-show="isSelected(option[optionsValue])"></span>
</a>
</li>
</template>
<slot></slot>
<div v-if="showNotify && !closeOnSelect" class="notify in" transition="fadein">{{limitText}}</div>
</ul>
<div v-if="showNotify && closeOnSelect" class="notify out" transition="fadein"><div>{{limitText}}</div></div>
</div>
- name="{{name}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- placeholder="{{searchText||text.search}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- invalid expression: Unexpected identifier in
options | filterBy searchValue
Raw expression: v-for="option in options | filterBy searchValue"
@ ./node_modules/vue-strap/src/Select.vue 11:0-220
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
我还附上了我的 main.js 和 App.vue 文件,我在其中调用了 Select.vue 组件:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div>
<app-header></app-header>
<v-select v-model="selected" :options="['Vue.js','React']"></v-select>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/header.vue'
import select from '../node_modules/vue-strap/src/Select.vue'
import Footer from './components/footer.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
'v-select': select,
},
data() {
return {
}
},
}
</script>
<style scoped>
</style>
我想知道为什么会出现此错误。我最初在另一个项目中也有这个错误,但让它过去了,因为我认为这可能是由于我在那里使用的依赖项的旧版本。但是在这个项目中我使用的是最新的,仍然没有编译。此外,页眉和页脚工作正常,没有问题。
任何帮助表示赞赏。谢谢
这些错误解释了它:
- name="{{name}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- placeholder="{{searchText||text.search}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- invalid expression: Unexpected identifier in
options | filterBy searchValue
Raw expression: v-for="option in options | filterBy searchValue"
1) 将 name="{{name}}"
替换为 :name="name"
2) 将 placeholder="{{searchText||text.search}}"
替换为 :placeholder="searchText || text.search"
3) filterBy
已弃用 - try replacing what you're iterating over with a computed method
根据你所说的和错误中显示的代码,你正在使用这个库:
https://github.com/yuche/vue-strap
此库不再维护,更重要的是与您显然正在使用的 Vue 2.9 不兼容。
您可以尝试使用应该与 Vue 2 兼容的 this alternative fork,但请记住,您可能需要更改代码库。
我正在尝试创建一个简单的 vueJs 项目,并在 webpack/babel 的帮助下编译它。然而,在 运行ning npm 运行 dev 编译项目并启动 vue 服务器时,我得到 Select.vue 模板的编译失败(安装 vue-strap 时安装的 Select.vue),下面是在我的本地端口上加载的确切错误:
Failed to compile.
./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5f7db264","hasScoped":true,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/vue-strap/src/Select.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<div v-el:select :class="classes">
<div class="form-control dropdown-toggle"
:disabled="disabled || !hasParent"
:readonly="readonly"
@click="toggle()"
@keyup.esc="show = false"
>
<span class="btn-content" v-html="loading ? text.loading : showPlaceholder || selected"></span>
<span v-if="clearButton&&values.length" class="close" @click="clear()">×</span>
</div>
<select v-el:sel v-model="value" v-show="show" name="{{name}}" class="secret" :multiple="multiple" :required="required" :readonly="readonly" :disabled="disabled">
<option v-if="required" value=""></option>
<option v-for="option in options" :value="option[optionsValue]||option">{{ option[optionsLabel]||option }}</option>
</select>
<ul class="dropdown-menu">
<template v-if="options.length">
<li v-if="canSearch" class="bs-searchbox">
<input type="text" placeholder="{{searchText||text.search}}" class="form-control" autocomplete="off"
v-el:search
v-model="searchValue"
@keyup.esc="show = false"
/>
<span v-show="searchValue" class="close" @click="clearSearch">×</span>
</li>
<li v-if="required&&!clearButton"><a @mousedown.prevent="clear() && blur()">{{ placeholder || text.notSelected }}</a></li>
<li v-for="option in options | filterBy searchValue" :id="option[optionsValue]||option">
<a @mousedown.prevent="select(option[optionsValue],option)">
<span v-html="option[optionsLabel]||option"></span>
<span class="glyphicon glyphicon-ok check-mark" v-show="isSelected(option[optionsValue])"></span>
</a>
</li>
</template>
<slot></slot>
<div v-if="showNotify && !closeOnSelect" class="notify in" transition="fadein">{{limitText}}</div>
</ul>
<div v-if="showNotify && closeOnSelect" class="notify out" transition="fadein"><div>{{limitText}}</div></div>
</div>
- name="{{name}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- placeholder="{{searchText||text.search}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- invalid expression: Unexpected identifier in
options | filterBy searchValue
Raw expression: v-for="option in options | filterBy searchValue"
@ ./node_modules/vue-strap/src/Select.vue 11:0-220
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
我还附上了我的 main.js 和 App.vue 文件,我在其中调用了 Select.vue 组件:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div>
<app-header></app-header>
<v-select v-model="selected" :options="['Vue.js','React']"></v-select>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/header.vue'
import select from '../node_modules/vue-strap/src/Select.vue'
import Footer from './components/footer.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
'v-select': select,
},
data() {
return {
}
},
}
</script>
<style scoped>
</style>
我想知道为什么会出现此错误。我最初在另一个项目中也有这个错误,但让它过去了,因为我认为这可能是由于我在那里使用的依赖项的旧版本。但是在这个项目中我使用的是最新的,仍然没有编译。此外,页眉和页脚工作正常,没有问题。 任何帮助表示赞赏。谢谢
这些错误解释了它:
- name="{{name}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- placeholder="{{searchText||text.search}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- invalid expression: Unexpected identifier in
options | filterBy searchValue
Raw expression: v-for="option in options | filterBy searchValue"
1) 将 name="{{name}}"
替换为 :name="name"
2) 将 placeholder="{{searchText||text.search}}"
替换为 :placeholder="searchText || text.search"
3) filterBy
已弃用 - try replacing what you're iterating over with a computed method
根据你所说的和错误中显示的代码,你正在使用这个库: https://github.com/yuche/vue-strap
此库不再维护,更重要的是与您显然正在使用的 Vue 2.9 不兼容。
您可以尝试使用应该与 Vue 2 兼容的 this alternative fork,但请记住,您可能需要更改代码库。