使用 vue-select 时编译失败

Posted 2023-02-23

【中文标题】使用 vue-select 时编译失败

【英文标题】：Compilation failing while using vue-select

【发布时间】：2020-05-21 13:41:31

【问题描述】：

我正在尝试创建一个简单的 vueJs 项目，并在 webpack/babel 的帮助下编译它。但是，在运行 npm run 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()">&times;</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">&times;</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>

我想知道为什么我会收到此错误。我最初在另一个项目中也遇到了这个错误，但是让它过去了，因为我认为这可能是由于我在那里使用的旧版本的依赖项造成的。但是在这个项目中，我使用的是最新的，它仍然没有编译。此外，页眉和页脚工作正常，没有问题。 任何帮助表示赞赏。谢谢。

【问题讨论】：

我认为它来自 vue 1.x ？

嗨，埃斯特拉迪亚兹。这是vue 2.9。对不起，但我不明白 v-for 与我的问题有什么关系。我正在尝试使用 vue-select 构建一个下拉列表。这里的代码笔codepen.io/sagalbot/pen/NpwrQO 有类似的代码，并且在那里工作正常。我想知道问题是什么。

【参考方案1】：

从你所说的和错误中显示的代码来看，你正在使用这个库： https://github.com/yuche/vue-strap

这个库不再被维护，更重要的是不兼容你显然正在使用的 Vue 2.9。

您可以尝试使用应该与 Vue 2 兼容的 this alternative fork，但请记住，您可能需要更改代码库。

【讨论】：

您好。感谢您对此进行调查。我不知道 Vue 2.9 不支持 vue-strap。但是我不明白为什么在使用 vue-cli 创建新项目时，package.json 包含 vue-strap？如果不再受支持，他们不应该将其删除吗？

我尝试使用备用 vue-strap，但现在我遇到了这些错误：***.com/questions/60080825/…。

【参考方案2】：

这些错误解释了它：

- 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

【讨论】：

你好，威利安德森。感谢您对此进行调查。错误消失了，但 v-select 没有出现在我的 html 中。知道为什么吗？