itsfrank / vue-typescript

Typescript decorators to make vue feel more typescripty
MIT License
358 stars 25 forks source link

Array idioms #11

Open davidmoshal opened 7 years ago

davidmoshal commented 7 years ago

Hi, am wondering what the current idioms are for Vue dat array handling in vue-typescript?

i.e:

  1. adding an element to an array?
  2. removing an element from an array?
  3. changing (updating) an element in an array?
  4. removing all elements from an arry?

Thanks David

itsfrank commented 7 years ago

I'm not 100% sure what you're refering to,.

If you're talking about this, it works exactly the same way and in standard vuejs. In fact, the vue typings even add autocompletion for $set and $remove.

I personally use push() and splice() as well as standard array modifications (if it is an array of objects, else i use $set). To clear an array i guess this works: this.array = []

For this, i guess whatever you would do in Javascript Vue is valid in vue-typescript

Hopefully i didn't completely miss your point.

davidmoshal commented 7 years ago

Seems like these work on both standard Vue arrays, and Vuex arrays changed by mutations:

    // 1) remove all: 

    arr = [] 

    // 2) remove element by ID: apparently filter is efficient:

    arr =  arr.filter(o => o[id_name] != id)

    // 3) upsert element, and have its properties update the GUI too:

    const existing = _.find(arr, id_name, id)
        if( existing )
           _.assign(existing, child)
       else
          arr.push(child)
waratah commented 6 years ago

Adding this purely as a comment for other searchers...

The following syntax works for Vue 2 and Typescript.

 constructor( private people: Administrator[]) {
           ... snip ....
 Replace( index: number, person: Administrator ) {
    Vue.set( this.people, index, person);
}