A better way to display select boxes when using `v-for` on objects.

Related tags

Form Select vue-dropdowns
Overview

vue-dropdowns

A better way to handle v-for on objects.

No special dependencies, no jquery, no bootstrap, just VueJS and CSS goodness.

Demo

Requirements

Installation

$ npm install vue-dropdowns
// OR
$ yarn add vue-dropdowns

Usage

<dropdown class="my-dropdown-toggle"
          :options="arrayOfObjects" 
          :selected="object" 
          v-on:updateOption="methodToRunOnSelect" 
          :placeholder="'Select an Item'"
          :closeOnOutsideClick="boolean">
</dropdown>

<script>
import dropdown from 'vue-dropdowns';

export default {
        data() {
          return {
            arrayOfObjects: [],
            object: {
              name: 'Object Name',
            }
          }
        },

        components: {
            'dropdown': dropdown,
        },

        methods: {
          methodToRunOnSelect(payload) {
            this.object = payload;
          }
        }
      }
</script>

<style scoped>
.my-dropdown-toggle {
  border-radius: 5px;

  ::v-deep .dropdown-toggle {
    color: tomato;
    font-size: 25px;
    font-weight: 800;
  }

  ::v-deep .dropdown-toggle-placeholder {
    color: #c4c4c4;
  }
}
</style>

Default values of props

Property Type Default value
closeOnOutsideClick boolean true
placeholder string 'Select an Item'

License

The MIT License

Comments
  • Dropdown menu doesn't display without extra styles

    Dropdown menu doesn't display without extra styles

    I found that when I click on the li with class "dropdown-toggle", the menu doesn't open unless I add the following to my styles:

    .dropdown-menu {
     display: block;
}
    opened by ara-medina 4
  • Use ellipsis for text overflow

    Use ellipsis for text overflow

    I had a dropdown menu item that had text selections that broke onto 2 lines. I updated my local CSS to use ellipsis instead of breaking into a 2nd line. This meant changing how the carate was positioned in the CSS. It no longer floats but is positioned absolutely.

    Sharing this in case it's helpful.

    opened by johnfmorton 3
  • Unable to change the placeholder for multiple dropdowns

    Unable to change the placeholder for multiple dropdowns

    Hi, I have three dropdowns that are connected. You select something in the first, the second gets updated accordingly. Now, the problem that I have is that I can't update the second/third dropdown to switch back to the 'Please select' when I update the first one. Instead, the old name in the second dropdown stays the same, and when I change my first dropdown, the second dropdown's options update, but I am unable to set back the 'Please select' placeholder for the second one.
    This is because this.selectedOption = this.selected; is in mounted() and this.selectedOption = option; is in the updateOption() I don't know what to do, I tried changing the :selected, but that obviously didn't work. I can't really change up the v-on:updateOption because of the way my dropdowns work and because If I put 2 methods or more in the updateOption, it's not gonna work.

    opened by wikosoft 2
  • Improvement/add development env

    Improvement/add development env

    Description

    Add development environment I think this environment is able to use to check changes and improve the vue-dropdowns package.

    Changes

    • add new folder - dev
    • add development environment
    • add tests for basic functionalities
    • add readme for development environment
    • update general readme
    opened by vladpopovv 2
  • Add class for styling placeholder text

    Add class for styling placeholder text

    Class placeholder allows styling of placeholder text content, independent from styling of .dropdown-toggle

    Screenshots

    Current (Placeholder text style defaults to .dropdown-toggle)

    Screen Shot 2020-09-16 at 00 58 19

    PR

    .dropdown-input

  // Override placeholder text colour
  >>> .placeholder
    color #C4C4C4
    Screen Shot 2020-09-16 at 00 58 34

    ... and dropdown list colour remains

    Screen Shot 2020-09-16 at 00 59 34
    opened by chuttam 1
  • Module fails to load on case-sensitive systems

    Module fails to load on case-sensitive systems

    As the title says, the module cannot be loaded by case-sensitive systems (such as Linux or *BSD)

    This is caused by the package.json referring to dropdown.vue instead of Dropdown.vue

    opened by bedmonds 1
  • feat : added the watch method on the function to make sure that the s…

    feat : added the watch method on the function to make sure that the s…

    While working with the dropdown i noticed that anytime an api call to populate the dropdown is called the selected data attribute is not updated so i added this watch to make sure it is updated when the prop changes.

    opened by enyoghasim 0
Owner
Mike Rodham
Geek, gamer, tech enthusiast.
Mike Rodham
GitHub https://mikerodham.github.io/vue-dropdowns/
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
A native-like select field, but better

A native-like select field, but better

Maksym Nesterov 18 Jun 1, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

POLITICO 12 Jan 1, 2023
VueForms-Mastery - Getting better at vue forms/ Intermediate - 02 VueMastery - Vue 3 Forms

advanced-forms Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints

Rickson Simões 0 Jan 4, 2022
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Selecto.js Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch. Demo / API / Main Project ⚙️ Instal

Daybrush (Younkue Choi) 1.2k Jan 9, 2023
Select components using Bulma as CSS framework.

Vue Bulma Select Select components using Bulma as CSS framework Docs/Examples Could be found here TODO Push to NPM Unit testing Multi-select (tags) De

Gabriel Corado 13 Oct 19, 2022
A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!

vue-dataset ?? HEADS UP! You're currently looking at vue-dataset branch for Vue.js 2. If you're looking for a Vue.js 3 compatible version of vue-datas

Giannis Koutsaftakis 173 Dec 27, 2022
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.5k Jan 2, 2023
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Dec 30, 2022
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Jan 1, 2023
This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Valère 96 Dec 27, 2022
Select with autocomplete, slots, bootstrap and material design themes.

The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes). Flexible select Demo + Documentation Featur

Илья 239 Nov 18, 2022
A vue version of bootstrap select

@alfsnd/vue-bootstrap-select A vue version of bootstrap select Demo Install npm install @alfsnd/vue-bootstrap-select --save Usage import VSelect from

Luis Sandoval 46 Nov 24, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 348 Dec 26, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 38 Nov 24, 2022
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 72 Dec 17, 2022
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 556 Dec 27, 2022