Vue-select: Method "filterBy" has already been defined as a prop.

[vishalpjpt]

I am unable to to use the plugin for for following dependencies

"dependencies": {
    "bitcore-lib": "^0.15.0",
    "app-root-dir": "^1.0.2",
    "axios": "^0.16.1",
    "bignumber.js": "^6.0.0",
    "bip39": "^2.5.0",
    "bluebird": "^3.5.1",
    "bootstrap": "^4.0.0",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-vue": "^2.0.0-rc.6",
    "chart.js": "^2.7.2",
    "coinselect": "^3.1.11",
    "crypto-js": "^3.1.9-1",
    "electron-debug": "^1.4.0",
    "electron-license": "^1.0.0",
    "electron-publisher-s3": "^20.8.1",
    "electron-spawn": "^5.0.0",
    "electrum-client": "https://github.com/Monaize/node-electrum-client.git#electrumx-persistence",
    "elliptic": "^6.4.0",
    "express": "^4.16.3",
    "fs": "^0.0.1-security",
    "glyphicons": "^0.2.0",
    "jquery": "^3.3.1",
    "js-sha256": "^0.9.0",
    "less": "^3.0.1",
    "less-loader": "^4.0.5",
    "libwallet-mnz": "https://github.com/Utrum/libwallet-oot",
    "lodash": "^4.17.5",
    "moment": "^2.22.0",
    "moment-timezone": "^0.5.14",
    "npm-license-crawler": "^0.1.8",
    "toml": "^2.3.3",
    "typeface-montserrat": "0.0.54",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "vue": "^2.3.3",
    "vue-chartjs": "^3.4.0",
    "vue-clipboard2": "0.0.8",
    "vue-electron": "^1.0.6",
    "vue-loaders": "^2.0.0",
    "vue-material": "^1.0.0-beta-10.2",
    "vue-qrcode-reader": "^0.7.2",
    "vue-qriously": "^1.1.1",
    "vue-router": "^2.5.3",
    "vue-toasted": "^1.1.24",
    "vuex": "^2.3.1",
    "yarn": "^1.9.4",
    "yui-lint": "^0.2.0"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.13",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "babili-webpack-plugin": "^0.1.2",
    "cfonts": "^1.1.3",
    "chai": "^4.0.0",
    "chalk": "^2.1.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.4",
    "del": "^3.0.0",
    "devtron": "^1.4.0",
    "electron": "^1.8.4",
    "electron-builder": "^19.19.1",
    "electron-devtools-installer": "^2.2.0",
    "eslint": "^3.16.1",
    "eslint-config-airbnb-base": "^10.0.1",
    "eslint-plugin-header": "^1.2.0",
    "eslint-plugin-import": "^2.2.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "inject-loader": "^3.0.0",
    "jquery": "^3.3.1",
    "karma": "^2.0.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-electron": "^5.1.1",
    "karma-mocha": "^1.3.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "^0.0.32",
    "karma-webpack": "^3.0.0",
    "material-design-icons": "^3.0.1",
    "mocha": "^5.0.5",
    "multispinner": "^0.2.1",
    "node-loader": "^0.6.0",
    "node-sass": "^4.7.2",
    "popper.js": "^1.12.9",
    "sass-loader": "^6.0.6",
    "select2": "^4.0.6-rc.1",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.5",
    "vue-select": "^2.4.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.4.2",
    "vue2-filters": "^0.3.0",
    "webpack": "^3.5.2",
    "webpack-dev-server": "^2.7.1",
    "webpack-hot-middleware": "^2.18.2",
    "webpack-merge": "^4.1.0"
  }

This is the Vue code

<template>
    <div>
         <v-select :options="coinsNew" v-model="selectNew" @input="updateNewCoin">
            <template slot="option" slot-scope="option">
                 <span :class="option.icon"></span>
                {{ option.label }}
            </template>
        </v-select>
    </div>
</template>
<script>
import vSelect from 'vue-select'
export default {
  name: 'withdraw',
  components: {
    'v-select': vSelect
  },
  data() {
    return {
      selectNew: {
        icon: 'KMD',
        ticker: 'KMD',
        label: 'komodo (KMD)'
      }
    };
  },
  methods: {
    updateNewCoin(value) {
      console.log("Update New Coin: ",value);
    }
  },
  computed: {
    coinsNew() {
      return this.$store.getters.enabledCoins.map(coin => { 
        return {
          ticker: coin.ticker,
          icon: coin.ticker,
          label: `${coin.name} (${coin.ticker})`
        }
      }).filter( coin => coin.ticker != 'BTC');
    }
  }
};
</script>

This is the error

vue.esm.js?efeb:591 [Vue warn]: Method "filterBy" has already been defined as a prop.
found in
---> <VSelect>
       <Withdraw> at src/renderer/components/WalletViews/Withdraw/Withdraw.vue
         <Wallet> at src/renderer/components/WalletViews/WalletView.vue
           <VueDico> at src/renderer/App.vue
             <Root>
warn @ vue.esm.js?efeb:591
initMethods @ vue.esm.js?efeb:3529
initState @ vue.esm.js?efeb:3309
Vue._init @ vue.esm.js?efeb:4628
VueComponent @ vue.esm.js?efeb:4798
createComponentInstanceForVnode @ vue.esm.js?efeb:4310
init @ vue.esm.js?efeb:4131
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
patch @ vue.esm.js?efeb:6091
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
updateChildren @ vue.esm.js?efeb:5845
patchVnode @ vue.esm.js?efeb:5936
updateChildren @ vue.esm.js?efeb:5822
patchVnode @ vue.esm.js?efeb:5936
patch @ vue.esm.js?efeb:6096
Vue._update @ vue.esm.js?efeb:2670
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
run @ vue.esm.js?efeb:3219
flushSchedulerQueue @ vue.esm.js?efeb:2981
(anonymous) @ vue.esm.js?efeb:1837
flushCallbacks @ vue.esm.js?efeb:1758
vue.esm.js?efeb:591 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "filterBy"

found in

---> <VSelect>
       <Withdraw> at src/renderer/components/WalletViews/Withdraw/Withdraw.vue
         <Wallet> at src/renderer/components/WalletViews/WalletView.vue
           <VueDico> at src/renderer/App.vue
             <Root>

[jgsnat]

Man also had this problem, the cause of it is the dependency: "vue2-filters": "^ 0.3.0". It uses a mixin with the name of a common function in libraries. I solved by creating a mixin and changing the names of these common functions.

[MicroDreamIT]

@igsnat its hard to understand.

[vishalpjpt]

Thanks @jgsnat
It worked.

[Paul-DS]

@jgsnat @vishalpjpt could you provide the code or a more detailed description of the solution. Thanks !

[luchnikovs]

This problem has forced me to abandon this component. It is strange that it is still not resolved

[larizzatg]

I just remove the dependencies of the vue2filter and create my custom filters prefixing them with an app.