Ошибка компиляции при использовании vue -select

Question

Я пытаюсь создать простой vueJs проект и скомпилировать его с помощью webpack / babel. Однако после запуска npm запуска dev для компиляции проекта и запуска сервера vue, я получаю, что компиляция шаблона Select. vue завершилась неудачно (Select. vue, который получает устанавливается при установке vue -strap), ниже приведена точная ошибка, которая загружается на мой локальный порт:

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

Я также присоединяю свой основной файл. js и приложение. vue , в который я вызываю компонент Select. vue:

main. js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(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>

I Интересно, почему я получаю эту ошибку. У меня изначально была эта ошибка и в другом проекте, но пусть она будет go, потому что я думал, что это может быть связано со старыми версиями зависимостей, которые я там использовал. Но в этом проекте я использую последние, но он не компилируется. Кроме того, верхний и нижний колонтитулы работают нормально, в них нет проблем. Любая помощь приветствуется. Спасибо.

Answer 1

Эти ошибки объясняют это:

- 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 устарела - попробуйте заменить то, что вы повторяете, вычисленным методом

Answer 2

Исходя из того, что вы сказали, и кода, показанного в ошибке, вы используете эту библиотеку: https://github.com/yuche/vue-strap

Эта библиотека больше не поддерживается и, что более важно, не совместима с Vue 2.9, который вы явно используете.

Вы можете попробовать использовать этот альтернативный форк , который должен быть совместим с Vue 2, но имейте в виду, что вам может потребоваться изменить базу кода ,