diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index d81deec..9e56f66 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -17,11 +17,6 @@ module.exports = merge(baseWebpackConfig, { minimizer: [ new TerserPlugin({ sourceMap: true, - terserOptions: { - compress: { - drop_console: true, - }, - }, }), ], }, diff --git a/docs/.vuepress/components/LoopedSelect.vue b/docs/.vuepress/components/LoopedSelect.vue new file mode 100644 index 0000000..75c29b1 --- /dev/null +++ b/docs/.vuepress/components/LoopedSelect.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index d8d80e0..583ba3d 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -114,12 +114,13 @@ module.exports = { ], }, { - title: 'Digging Deeper', + title: 'Use Cases', collapsable: false, children: [ ['guide/validation', 'Validation'], ['guide/vuex', 'Vuex'], ['guide/ajax', 'AJAX'], + ['guide/loops', 'Using in Loops'], ], }, { diff --git a/docs/guide/loops.md b/docs/guide/loops.md new file mode 100644 index 0000000..9c7e223 --- /dev/null +++ b/docs/guide/loops.md @@ -0,0 +1,17 @@ +### Using Vue Select in v-for Loops +--- + +There may be times that you are including Vue Select within loops of data, such as a table. This can +pose some challenges when emitting events from the component, as you won't know which Vue Select +instance emitted it. This can make it difficult to wire up with things like Vuex. + +Fortunately, you can solve this problem with an anonymous function. The example below doesn't use +Vuex just to keep things succinct, but the same solution would apply. The `@input` is handled +with an inline anonymous function, allowing the selected country to be passed to the `updateCountry` +method with the `country` and the `person` object. + + + +<<< @/.vuepress/components/LoopedSelect.vue + + diff --git a/package.json b/package.json index a194899..deefd80 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "private": false, "main": "dist/vue-select.js", "license": "MIT", + "prepare": "npm run build", "scripts": { "serve": "webpack-dev-server --config build/webpack.dev.conf.js --hot --progress -d", "serve:docs": "cd docs && yarn serve",