Vue: [Feature]: Add support of the iterator protocol (es6) for v-for directive (map, weakset, weakmap)

[nervgh]

Hi

I has modified "Quick example" with using the Iterator protocol.
Will be great if it will work in 1.0 version for es6 environments.

Useful links:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Iteration_protocols
http://www.2ality.com/2015/02/es6-iteration.html

[young-steveo]

Does this suggestion break the Vue concept that $data should be JSON.stringify-able?

[yyx990803]

I'd like to see a convincing use case for supporting this because this involves non-trivial addition to the observation mechanism.

[nervgh]

because this involves non-trivial addition to the observation mechanism.

Maybe this helps

var array1 = [{a:1},{b:2}];
var set = new Set(array1);

if (Symbol.iterator in set) {
    var array2 = Array.from(set);
    console.log('array2=', array2); // [{a:1},{b:2}]
}

console.log('array1 === array2', array1 === array2); // false

http://jsfiddle.net/ywzdank1/

I'd like to see a convincing use case for supporting this

1. iterable is new general thing for js
2. I think Angular2 will be support it

[yyx990803]

@nervgh these are not use cases. Angular 2 supporting it is cool, but what is a scenario that requires your UI state to be a Set or a Map?

[yyx990803]

Closing because:

1. I don't think there are cases where it's necessary to use Set or Map to represent UI state;
2. They are not JSON serializable;
3. The benefits doesn't justify the amount of work needed to properly support them, especially when they are not available in every browser.

[kyle-mccarthy]

@yyx990803 Here is a valid use case that supports the need for a set.

var app = new Vue({
    el: '#app-contact',
    data: {
      name: null,
      email: null,
      phone: null,
      company: null,
      touched: new Set()
    },
    computed: {
      isValid: function () {
        return {
          disabled: (this.name === null || this.email === null || this.phone === null || this.company === null)
        }
      }
    },
    methods: {
      focused: function (key) {
        this.touched.add(key);
      },
      valid: function (key) {
        if (!this.touched.has(key)) {
          return null;
        }
        return (this[key] !== null && this[key] !== "");
      }
    }
  });

I don't want the fields to initially be displayed as invalid on the UI, I add a class to show an input as a valid or invalid element. The element is only marked as valid or invalid once it is brought into focus, and marked as touched. I don't want to have a potentially massive array containing all the times an input has been brought into focus, so the Set would be ideal.

[qm3ster]

@kyle-mccarthy Why not this?

const keys = [
  'name',
  'email',
  'phone',
  'company'
]
const data = keys.reduce(
  (obj, key) => {...obj, [key]: {val: null, touched: false}},
  {}
)
const app = new Vue({
  el: '#app-contact',
  data: () => data,
  computed: {
    isValid () {
      return {
        disabled: keys.map(key => this[key])
          .some(field => field.value === null)
      }
    }
  },
  methods: {
    focused (key) {
      this[key].touched=true
    },
    valid (key) {
      const field=this[key]
      if (field.touched) {return null}
      return field.val !== null && field.val !== ''
    }
  }
})

[Ineluki]

+1 for implementing this. I have a tree data structure with an iterator, converting to arrays would result in large, unnecessary overhead.

[coderek]

What's the state of this issue now?

[smalllong]

Maps/Sets are useful stuctures. It's urgent to support them in Vue, otherwise it'll be inefficient to use them in Vue apps.

[tyranteon]

very weird issue. If you support Objects then it's only consequent to also support Maps and Sets for exactly the same reason.

[shirshak55]

any progress?

[Orimay]

I have a custom collection class, that has an iterator, and I can not loop over it with v-for

[shaunc]

@yyx990803 Iterator protocol isn't just for Set, etc. I want to use flatbuffers for data (which is, of course serializable, as you mentioned that), over which I can use a custom iterator. The point is vue need not be opinionated about in what data structures data is stored, as we have the iterator protocol.

[yyx990803]

This is already supported in 2.6.