Vue: v-for . में अधिक संग्रह डेटा प्रकारों का समर्थन करें

को निर्मित 28 फ़र॰ 2016 · 39टिप्पणियाँ · स्रोत: vuejs/vue

कुछ स्थितियों में, सादा वस्तु सबसे अच्छा विकल्प नहीं है। मैंने Map ऑब्जेक्ट को v-for द्वारा प्रस्तुत करने का प्रयास किया, लेकिन ऐसा लगता है कि Vue वर्तमान में इसका समर्थन नहीं करता है। (यहां एक पोस्ट है

आशा है कि Vue for ... of में v-for for ... of सिंटैक्स प्रदान कर सकता है ताकि Map और Set जैसे डेटा प्रकारों पर पुनरावृति हो सके।

उदाहरण के लिए:

const map = new Map();
map.set('key1', 'val1');
map.set('key2', 'val2');

और हम इस तरह से map प्रस्तुत कर सकते हैं:

<ul>
    <li v-for="[key, val] of map">{{key}} - {{val}}</li>
</ul>

feature request

स्रोत

wenLiangcan

👍192 ❤32 🎉10

सबसे उपयोगी टिप्पणी

लूप में पुनरावृत्तियों पर पुनरावृति करने में सक्षम होना महत्वपूर्ण है। यह स्पष्ट रूप से प्रतीत होता है। यह भाषा की मौलिक विशेषता है।

इसका समर्थन करने के कारण हैं:

1) इटरेटर्स, मैप्स और सेट सभी मान्य ES6 हैं। उनका समर्थन करने से इनकार करने का अर्थ है अपने आप को ES5 तक सीमित रखना, जो कि समय के साथ कम और उचित होता जा रहा निर्णय है।
2) मैं एक ऐसा एप्लिकेशन बना रहा हूं जिसमें मानचित्र और सेट में आंतरिक डेटा संग्रहीत हो। उन्हें UI के लिए उपलब्ध कराने के बजाय, मुझे अब डेटा को मैन्युअल रूप से दोनों के बीच समन्वयित करने की आवश्यकता है, या बॉयलरप्लेट लिखने और डेटा की आवश्यकता होने पर रूपांतरण करने के लिए इसे अपने टेम्प्लेट में आयात करने की आवश्यकता है। यह वही है जो Vue से बचने का इरादा है।

catsclaw 7 सित॰ 2016

👍101 ❤8 🎉5 👀1

सभी 39 टिप्पणियाँ

https://github.com/vuejs/vue/issues/1319 . का डुप्लिकेट

@wenLiangcan , आप इस तरह कुछ उपयोग कर सकते हैं:

<ul>
    <li v-for="[key, val] of get(map)">{{key}} - {{val}}</li>
</ul>

जहां get() आपका कार्य है।

nervgh 28 अप्रैल 2016

👍1

हाहा! इसी तरह के मुद्दे हर समय खुलते हैं और लोग जोर देते हैं कि वे कार्यान्वयन को उचित नहीं ठहरा सकते हैं, लोग इसका उपयोग करना चाहते हैं, यह एक औचित्य है कि मैं बंद किए गए मुद्दों के अरबों को भी सूचीबद्ध कर सकता हूं जो एक ही बात xD पूछते हैं। मैंने एक ऐसा भी पाया जो उपयोग-मामले को वास्तव में अच्छी तरह से सही ठहराता है और जब नक्शा ऑर्डर की बात आती है तो es6 विनिर्देश को संदर्भित करता है -> अभी भी बंद है।

agalazis 25 अग॰ 2016

👍9

एक सुविधा का उपयोग करने के इच्छुक लोग, केवल अपने आप में, एक तर्क नहीं है जो ऐसी सुविधा होने की आवश्यकता को उचित ठहरा सकता है, ऐसी सुविधा को जोड़ने की लागत और लाभ (कौन सी समस्या हल की जा रही है) को तौलना आवश्यक है

posva 25 अग॰ 2016

👎50 👍14 😕8 👀3

हां, लेकिन फिर भी लोग इस मुद्दे को बंद करने के लिए जिन तर्कों का उपयोग करते हैं, वे अभी भी मान्य नहीं हैं या कम से कम सभी उपयोग के मामलों के लिए मान्य नहीं हैं जैसे कि एलीपेन का उदाहरण जिसने अपने उपयोग के मामलों को बहुत अच्छी तरह से उचित ठहराया जैसा कि मैंने ऊपर उल्लेख किया है

agalazis 25 अग॰ 2016

👍4

यदि आप किसी विशिष्ट मुद्दे पर चर्चा करना चाहते हैं, तो कृपया उससे लिंक करें।

साथ ही, यह फीचर इश्यू खुला है। एक ही अनुरोध के लिए एक से अधिक मुद्दे खोलने का कोई मतलब नहीं है।

LinusBorg 25 अग॰ 2016

इसका समर्थन करने के कारण हैं:

catsclaw 7 सित॰ 2016

👍101 ❤8 🎉5 👀1

चूंकि #1319 बंद है, इसलिए यहां वर्तमान निर्णय को दोहराना उचित है। संक्षेप में, यह सुविधा लागू करने के लिए तुच्छ नहीं है (अवलोकन तंत्र स्तर पर), इसलिए यह उपयोग के मामलों को सही ठहराने के बारे में नहीं है, यह काम की मात्रा और ट्रेड-ऑफ के बारे में है।

मैं भी वास्तव में इस सुविधा की सराहना करता हूं। दूसरी ओर, यदि ES6 डेटा प्रकारों को देखना बहुत अधिक हैक हो जाता है या, उदाहरण के लिए, प्रदर्शन या अन्य गुणों से समझौता करता है, तो जो लोग वर्तमान में मैप्स और Vue के साथ सेट का उपयोग नहीं करते हैं, वे इस परिवर्तन की सराहना नहीं कर सकते हैं।

inca 21 दिस॰ 2016

👍9 🎉2

मुझे लगता है कि गणना किए गए फ़ंक्शन के अंदर Array.from() का उपयोग

lmj0011 9 जून 2017

👍3

उसके लिए कोई उपाय?

alexsandro-xpt 27 जुल॰ 2017

छोटा अपडेट, यह तब आएगा जब/जब Vue "विरासत" ब्राउज़रों को छोड़ने का निर्णय लेता है और प्रतिक्रियाशीलता के लिए set / get के बजाय Proxy साथ सदाबहार में चला जाएगा।

@ alexsandro-xpt, बस एक परिकलित फ़ंक्शन का उपयोग करें जो Array.from(yourDataSet) लौटाता है।

nickmessing 27 जुल॰ 2017

👍1

@nickmessing मैं मानचित्र के साथ प्रयास करता हूं, काम नहीं करता है।
परिकलित सरणी लंबाई मान हमेशा 0 होता है।

alexsandro-xpt 27 जुल॰ 2017

प्रतिक्रियाशीलता की कमी के कारण केवल Array.from शायद वह समाधान नहीं है जो आप चाहते हैं ( yourDataSet परिवर्तन Vue में प्रचारित नहीं होंगे)।

जैसा कि पहले उल्लेख किया गया है, सेट और मानचित्र Vue द्वारा नहीं देखे जा सकते हैं। इनका उपयोग करने के लिए - या तो v-for , या गणना की गई संपत्तियों, विधियों, दर्शकों, टेम्पलेट अभिव्यक्तियों आदि में - आपको इस संरचना की एक क्रमिक प्रतिकृति बनाने और इसे Vue के सामने लाने की आवश्यकता है। यहां एक सरल उदाहरण दिया गया है जो सेट को अपडेट करने की जानकारी के साथ Vue प्रदान करने के लिए एक साधारण काउंटर का उपयोग करता है:

data() {
  mySetChangeTracker: 1,
  mySet: new Set(),
},

computed: {
  mySetAsList() { 
    // By using `mySetChangeTracker` we tell Vue that this property depends on it,
    // so it gets re-evaluated whenever `mySetChangeTracker` changes
    return this.mySetChangeTracker && Array.from(this.mySet);
  },
},

methods: {
  add(item) {
    this.mySet.add(item);
    // Trigger Vue updates
    this.mySetChangeTracker += 1;
  }
}

यह गैर-अवलोकन योग्य डेटा को प्रतिक्रियाशील बनाने के लिए थोड़े हैकी लेकिन 100% कार्य पद्धति को दिखाता है। फिर भी, वास्तविक दुनिया के मामलों में मैं सेट्स/मैप्स के क्रमबद्ध संस्करणों के साथ समाप्त हुआ (उदाहरण के लिए आप शायद स्थानीय स्टोरेज में सेट/मैप्स के संशोधित संस्करणों को स्टोर करना चाहते हैं और इस तरह उन्हें वैसे भी क्रमबद्ध करना चाहते हैं), इसलिए कोई कृत्रिम काउंटर/हैक्स शामिल नहीं थे।

मुझे व्यक्तिगत रूप से लगता है कि यह किसी समस्या का एक उचित समाधान है, लेकिन यह निश्चित रूप से कुछ आधिकारिक दस्तावेज के योग्य है - अन्यथा इसे Vue इंटर्नल से निपटने के गैर-हैकी तरीके के रूप में उचित ठहराना असंभव है।

inca 27 जुल॰ 2017

👍38 🎉7 ❤5

@ alexsandro-xpt, क्षमा करें, मैं गलत था, गणना हैकी होगी जैसा कि हैकी समाधान एक विधि के साथ $forceUpdate का उपयोग करेगा, यहां एक उदाहरण पहेली है

nickmessing 27 जुल॰ 2017

👍3

धन्यवाद @nickmessing और @inca , यह मेरे new Map() साथ ठीक काम करता है !!

alexsandro-xpt 28 जुल॰ 2017

अभी जब आप "मानचित्र" पर "v-for" करते हैं, तो v-for कार्य करता है जैसे कि उसे एक खाली सरणी मिली हो।

मैप्स और सेट्स का समर्थन करने के बारे में विस्तारित चर्चा के परिणाम के बावजूद, यह बहुत सारे लोगों को डिबगिंग समय बचाएगा यदि Vue ने केवल चेतावनी दी "मैप्स और सेट अभी तक समर्थित नहीं हैं - https://github देखें .com/vuejs/vue/issues/2410 "।

dsandber 13 अग॰ 2017

👍24

हाँ, इस सुविधा के लिए Google खोज ने मुझे इस टिकट पर लाया (Vue.set के साथ कुछ कष्टप्रद मिश्रण के बाद)

यह दस्तावेज़ीकरण के लिए v- में होना चाहिए!

warent 5 सित॰ 2017

👍3

वास्तव में, वी-फॉर डॉक्यूमेंटेशन में होना चाहिए!

alexsandro-xpt 5 सित॰ 2017

/cc @chrisvfritz आइए v-for (दोनों API और सूची रेंडरिंग अनुभाग) के दस्तावेज़ों में इन प्रकारों के लिए समर्थन के बारे में एक नोट जोड़ने का प्रयास करें - मैं 2.5 में उन पर भी एक नज़र डालूंगा।

yyx990803 5 सित॰ 2017

@ yyx990803 मुझे आश्चर्य है कि इसके लिए कंसोल चेतावनी बेहतर होगी, क्योंकि इससे लोगों को तुरंत पता चलेगा कि समाधान की खोज करने की आवश्यकता को छोड़कर क्या गलत है।

हम दस्तावेज़ों में पहले से ही बहुत स्पष्ट हैं कि हम किस प्रकार का _do_ समर्थन करते हैं, Map और Set उनमें से नहीं हैं। मैं निश्चित रूप से इस तर्क को देख सकता हूं कि _होप_ सभी पुनरावृत्तियों के साथ काम क्यों कर सकते हैं v-for , लेकिन मुझे नहीं लगता कि हम वर्तमान में पाठकों को उम्मीद करने का कोई कारण देते हैं।

chrisvfritz 7 सित॰ 2017

👍6

मुझे Set लिए समर्थन जोड़ने के खिलाफ तर्क बिल्कुल दिखाई नहीं दे रहा है।

Set खुद को साफ-सुथरा पॉलीफिल किया जा सकता है, और जब तक मुझे कुछ याद नहीं आ रहा है, ऐसा लगता है कि सरणी में प्रतिक्रियाशीलता जोड़ने के लिए वू के दृष्टिकोण को सेट तक आसानी से बढ़ाया जा सकता है। हमें केवल .add() , .clear() , और .delete() को लपेटना होगा।

schmod 11 सित॰ 2017

👍10

मेरा सबसे अच्छा अनुमान (अगर मैं गलत हूं तो कृपया सही करें/क्षमा करें): सबसे मुश्किल हिस्सा Set कन्स्ट्रक्टर को लपेटना है, जो एक पुनरावर्तनीय स्वीकार करता है। मैं नहीं देखता कि चलने योग्य कैसे देखा जा सकता है, क्योंकि इसके सामान्य रूप में यह केवल एक फ़ंक्शन (यानी next ) है जिसमें कोई संदर्भ योग्य स्थिति नहीं है (उदाहरण के रूप में जेनरेटर-आधारित इटरेटर के बारे में सोचें)।

inca 12 सित॰ 2017

हमें कंस्ट्रक्टर को लपेटने की आवश्यकता क्यों है? क्या हम पहले से मौजूद सेट्स को Vue में पास नहीं कर रहे हैं?

कल्पना के अनुसार, Set कंस्ट्रक्टर तुरंत पूरे पुनरावर्तक के माध्यम से चलता है, प्रभावी रूप से पुनरावर्तक द्वारा लौटाए गए अद्वितीय आइटम की उथली प्रतिलिपि को बनाए रखता है। एक बार आपके पास Set उदाहरण हो जाने के बाद, इससे कोई फर्क नहीं पड़ता कि यह एक पुनरावर्तक से बनाया गया था या नहीं।

इस संबंध में, एक पुनरावर्तक से बनाया गया Set एक पुनरावर्तक से बनाई गई सरणी से अलग नहीं होना चाहिए ( Array.from() माध्यम से), जो Vue पहले से ही समर्थन करता है।

schmod 12 सित॰ 2017

👍4

आप अपरिवर्तनीय मानचित्र/सेट/जो भी डेटा संरचनाओं का उपयोग कर सकते हैं और उनके साथ प्रतिक्रियाशीलता की अनुमति दे सकते हैं, लेकिन केवल इसलिए कि संपूर्ण खंड संदर्भ बदलता है। आप उन्हें एक रेंडर फ़ंक्शन या कंप्यूटेड जेनरेटेड एरे के माध्यम से प्रस्तुत कर सकते हैं (पहले प्रदर्शन में बेहतर होने के कारण यह एक सरणी के निर्माण को छोड़ देता है ..)। लेकिन परिवर्तनशील डेटा संरचनाएं, ऐसा तब तक नहीं जब तक आपको मैन्युअल रूप से विशिष्ट परिवर्तनों के Vue को सूचित करने का कोई तरीका नहीं मिल जाता है, जो कि केवल होमब्रेइंग वर्ष स्वयं का समाधान होगा।

Glidias 19 सित॰ 2017

यह अच्छा नहीं है। आप यह नहीं कर सकते

zDream 27 दिस॰ 2017

@wenLiangcan

var map = new Map()
  map.set('key1','Test1')
  map.set('key2','Test2')

        <div class="file-size">{{value}}</div>
 </div>

नहीं, यह पेज पर दिखाई नहीं देता

zDream 27 दिस॰ 2017

👍1

इसके समर्थन के लिए उत्सुक :)

tomeightyeight 19 जन॰ 2018

👍34 ❤8

मैं भी

alexsandro-xpt 26 जन॰ 2018

समर्थन जोड़ने की कोई भविष्य की योजना? क्या कोई तकनीकी कारण है कि Vue मानचित्र और सेट का समर्थन नहीं कर सका?

lloydjatkinson 30 जन॰ 2018

👍17

एक सादे वस्तु पर Vue.set पद्धति के साथ वर्तमान समस्या यह है कि जब कोई संपत्ति वस्तु में जोड़ी जाती है तो यह बहुत अधिक ग्राहकों को ट्रिगर करती है। असल में, सभी संपत्तियों के सभी ग्राहक ट्रिगर होते हैं जब केवल एक संपत्ति जोड़ा जाता है।

जब संग्रह जैसे मानचित्र में सौवां चाबियां होती हैं तो दृश्य का प्रदर्शन बुरी तरह प्रभावित होता है। उदाहरण के लिए, मेरे प्रोजेक्ट में Vue.set ऑपरेशन का उपयोग करके मानचित्र में एक तत्व जोड़े जाने पर हजारों ग्राहक ट्रिगर होते हैं:

Vue.set(state.items, itemId, item); // where items is a plain object.

जब मैं Vue.js कोड को गहराई से देखता हूं, तो मैं देख सकता हूं कि समस्या कहां से आती है। ट्रिगर होने वाली निर्भरताएँ ऑब्जेक्ट की होती हैं, जिसका अर्थ है कि यदि ऑब्जेक्ट में प्रत्येक कुंजी के लिए एक गुण है, तो केवल एक कुंजी जोड़ने पर सभी कुंजियों की सभी निर्भरताएँ ट्रिगर हो जाती हैं।

इसलिए मानचित्र की नकल करने के लिए सादे वस्तुओं का उपयोग करना सही समाधान के रूप में नहीं दिखता है, और इसलिए वस्तुओं के बड़े संग्रह के लिए Vue में मानचित्र के लिए समर्थन का स्वागत अधिक है।

steappe 10 फ़र॰ 2018

👍19

क्या भविष्य की योजनाओं और संभवतः मूल Map/Set समर्थन के बारे में कोई खबर है?

cawa-93 16 मार्च 2018

👍31 ❤7

यह आलेख 2.6 में आगामी समर्थन का विवरण देता है - लेकिन आधिकारिक रोडमैप में इसके बारे में कुछ भी नहीं है जो मैं देख सकता हूं?

https://medium.com/@alberto.park/the -status-of-javascript-libraries-frameworks-2018-beyond-3a5a7cae7513

"कोर का वर्तमान नवीनतम संस्करण 2.5.x है। अगली छोटी रिलीज (v2.6), देशी ईएसएम आयात, बेहतर एसिंक त्रुटि प्रबंधन, 'वी-फॉर' निर्देश पर पुनरावर्तक और अधिक का समर्थन करेगी।"

सुनिश्चित नहीं हैं कि उन्हें यह जानकारी कहाँ से मिली?

tomeightyeight 3 अप्रैल 2018

Set डेटा ऑब्जेक्ट पर हेक Vue के व्यवहार को डीबग करते समय यह समस्या मिली। :विचारधारा:

blackst0ne 7 अग॰ 2018

👍3

मेरे जैसे लोगों के लिए जो इसके लिए रोडमैप के बारे में सोच रहे थे, इवान यू इस वीडियो में कहते हैं कि मैप और सेट समर्थन 2.6 में आने की "संभावना" है, लेकिन वह मई में था, इसलिए मुझे बस इतना ही पता है।

OCJvanDijk 7 अग॰ 2018

👍1

@ yyx990803 यह दुर्भाग्यपूर्ण है कि ट्रैकर में यह समस्या बंद के रूप में चिह्नित है, खासकर यदि आप निकट भविष्य में समर्थन जोड़ने पर विचार कर रहे हैं। हम इस सुविधा पर प्रगति का अनुसरण कहां कर सकते हैं? क्या कोई और मुद्दा कहीं है?

bradisbell 14 अग॰ 2018

👍18

बस तर्क के लिए सोच रहा था, और शायद मैं इसे गलत कर रहा हूं, लेकिन चूंकि आप उत्परिवर्तन विधियों का उपयोग करके सरणी उत्परिवर्तन को ट्रैक कर सकते हैं, क्या आप किसी ऑब्जेक्ट की सरणी को ट्रैक नहीं कर सकते हैं और तार्किक रूप से पूर्ण हो सकते हैं? आपको मानचित्र में लागू सभी समान सुविधाएँ नहीं मिलती हैं, लेकिन जिन्हें आप चाहते हैं उन्हें बहुत आसानी से संबोधित किया जाएगा, खासकर यदि आप _ या लॉश जैसी किसी चीज़ का उपयोग कर रहे हैं।

steven87vt 21 अग॰ 2018

यह दुखद है, लेकिन जब तक टीम इसे नहीं जोड़ती, तब तक हमें वैकल्पिक डेटा संरचनाओं का उपयोग करना पड़ सकता है

pkanane 5 सित॰ 2018

👍5

बस इसमें झंकार करना चाहते हैं कि हम अपने डेटा संरचना के लिए मानचित्र का उपयोग करने जा रहे थे, फिर प्रथम-पक्ष समर्थन की कमी के कारण इसके खिलाफ निर्णय लिया।

Dwood15 31 अक्तू॰ 2018

यह vue.js v3.0 के लिए योजनाबद्ध है।
तुलना करें: https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf

bodograumann 1 नव॰ 2018

👍43 🎉13 😕11 👀1

क्या यह अब Vue3 में समर्थित है (अर्थात, प्रतिक्रियाशील Map और Set )?

softwareCobbler 23 सित॰ 2020

👀1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Vue: v-for . में अधिक संग्रह डेटा प्रकारों का समर्थन करें

सबसे उपयोगी टिप्पणी

सभी 39 टिप्पणियाँ

संबंधित मुद्दों