Compilation failing while using vue-select

Question

I am trying to create a simple vueJs project, and compile it with thethe help of webpack/babel. However upon running npm run dev to compile the project and start the vue server, I am getting that compilation of the Select.vue template has failed(the Select.vue which gets installed upon installing vue-strap), below is the exact error that is loading up on my local port:

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

I am also attaching my main.js and App.vue file, into which I am calling the Select.vue component:

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>

I wonder why I am getting this error. I originally had this error in another project too, but let it go because I thought it might be due to the old versions of dependencies that I was using there. But in this project I am using the latest ones, still it is not compiling. Also, the header and footer are working fine, no problem in them. Any help is appreciated. Thanks.

Answer 1

These errors explain it:

- 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. replace name="{{name}}" with :name="name"

2. replace placeholder="{{searchText||text.search}}" with :placeholder="searchText || text.search"

3. filterBy is deprecated - try replacing what you're iterating over with a computed method

Answer 2

From what you say and the code shown in the error, you are using this library: https://github.com/yuche/vue-strap

This library is not mantained anymore and more importantly not compatible with Vue 2.9 that you are apparently using.

You can try to use this alternative fork that should be compatible with Vue 2, but keep in mind that you may need to change your codebase.