New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
nervgh opened this Issue Sep 15, 2015 · 13 comments

Comments

Projects
None yet
@nervgh
Copy link
Contributor

nervgh commented Sep 15, 2015

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

This comment has been minimized.

Copy link
Contributor

young-steveo commented Sep 15, 2015

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

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Sep 15, 2015

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

@nervgh

This comment has been minimized.

Copy link
Contributor Author

nervgh commented Sep 15, 2015

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

This comment has been minimized.

Copy link
Member

yyx990803 commented Sep 16, 2015

@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

This comment has been minimized.

Copy link
Member

yyx990803 commented Dec 8, 2015

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

This comment has been minimized.

Copy link

kyle-mccarthy commented Apr 12, 2017

@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

This comment has been minimized.

Copy link

qm3ster commented May 17, 2017

@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

This comment has been minimized.

Copy link

Ineluki commented Aug 29, 2017

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

@posva posva changed the title [Feature]: Add support of the iterator protocol (es6) for v-for directive [Feature]: Add support of the iterator protocol (es6) for v-for directive (map, weakset) Oct 11, 2017

@posva posva changed the title [Feature]: Add support of the iterator protocol (es6) for v-for directive (map, weakset) [Feature]: Add support of the iterator protocol (es6) for v-for directive (map, weakset, weakmap) Oct 11, 2017

@coderek

This comment has been minimized.

Copy link

coderek commented Dec 23, 2017

What's the state of this issue now?

@smalllong

This comment has been minimized.

Copy link

smalllong commented Feb 28, 2018

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

@destructive-dragon

This comment has been minimized.

Copy link

destructive-dragon commented Mar 15, 2018

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

@shirshak55

This comment has been minimized.

Copy link

shirshak55 commented Oct 5, 2018

any progress?

@Orimay

This comment has been minimized.

Copy link

Orimay commented Dec 11, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment