Giter Club home page Giter Club logo

vuetify-cascader's Introduction

vuetify-cascader

A missing cascader select for vuetify

This repo will be archived, please migrate to [https://github.com/tookit/vmajs]

Demo

http://vma.isocked.com/#/element/cascader/

example

Installation

# npm
npm install vuetify-cascader

# Yarn
yarn add vuetify-cascader

Props

Name Type Default Required? Description
items Array [] Y A nested data set
itemValue String value N Set property of items’s value - must be primitive.
itemText String value N Set property of items’s text value
outlined Boolean false N Applies the outlined style to the input
label String null N Set input's label

Usage

<template>
  <v-app id="app">
    <v-container>
      <v-row>
        <v-col cols="12" md="6">
          <v-cascader
            v-model="selectedItem"
            label="Select Product"
            item-value="id"
            item-text="text"
            :items="items"
            outlined
          />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
import VCascader from './components/VCascader.vue'

export default {
  components: {
    VCascader,
  },

  data() {
    return {
      items: [
        {
          id: 1,
          text: 'Phone',
          value: 'phone',
          children: [
            ...
          ],
        },
      ],
      selectedItem: null,
    }
  },
}
</script>

For other uses see examples: https://github.com/tookit/vuetify-cascader/blob/master/src/App.vue

vuetify-cascader's People

Contributors

tookit avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vuetify-cascader's Issues

Please add these features

1 - Auto completion
2- Show the following feature instead of side by side
3- Customize inside the template

Cannot run component properly.

Hi there

Thanks for this amazing component, but I cant seem to run it properly. I am using the CDN version.

Here is the gif of what is happening:
https://github.com/Mashiane/BANanoVuetifyAD3/blob/main/Stuff/VCascader.gif

I am using string based id and not numeric. Is it not possible to use string based ids?

I am getting this error on the console.

Error in callback for immediate watcher "value": "TypeError: Cannot read properties of undefined (reading '0')"

Can you please advise? Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.