Giter Club home page Giter Club logo

Comments (2)

wotamann avatar wotamann commented on July 21, 2024

Thanks for your contribution!

v-bind can not handle an dot attribute like .sync therefore I will add in next vFormBase.vue

<!-- DEFAULT all other Types -> typeToComponent -->
<div
  :is="mapTypeToComponent(obj.schema.type)"
  v-else
  v-bind="bindSchema(obj)"
  :type="checkExtensionType(obj)"                  
  :value="setValue(obj)"
  :obj="obj"
  :search-input.sync="obj.schema.searchInput"
  ...

and the example 'Fetch Data on Search Input with Autocomplete or Combobox'

let autocomplete = null
let combobox = null

export default {
  components: { VFormBase },
  data () {
    return {
      myModel: {
        combobox: null,
        autocomplete: null
      },
      mySchema: { 
        combobox: { 
          type:'combobox', 
          items: this.items,
          cacheItems:true,
          searchInput: '',
        },       
        autocomplete: { 
          type:'autocomplete', 
          items: this.items,
          cacheItems:true,
          searchInput: '',
        }         
      },
      states: [
          'Alabama',
          'Alaska',
         // ...
          'Wyoming',
        ]      
    }
  },
  watch: {
    mySchema: {
      deep: true,
      async handler(val) {
        if (val.autocomplete.searchInput !== autocomplete) {
          val.autocomplete.items = await this.fetch(this.states.filter( i => i.includes(val.autocomplete.searchInput)));
          autocomplete = val.autocomplete.searchInput
        } 

        if (val.combobox.searchInput !== combobox) {
          val.combobox.items = await this.fetch(this.states.filter( i => i.includes(val.combobox.searchInput)));
          combobox = val.combobox.searchInput
        } 
      }
    }
  },
  methods: {
    fetch(obj) { 
      return new Promise( (resolve, reject) => setTimeout(() => resolve(obj), 500) )
    }
  }

from vuetify-form-base.

wotamann avatar wotamann commented on July 21, 2024

See a working autocomplete example

from vuetify-form-base.

Related Issues (20)

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.