ভ্যু জেএস - এক্স-বারের মাধ্যমে ল-লুপ (একটি পরিসরে)

Question

আমি কীভাবে v-forএক্স (যেমন 10) বারের মাধ্যমে একটি লুপটি পুনরাবৃত্তি করতে পারি ?

// want to repeat this (e.g.) 10 times

<ul>
  <li v-for="item in shoppingItems">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

ডকুমেন্টেশনটি দেখায়:

<ul>
  <li v-for="item in 10">{{ item }}</li>
</ul>

// or 

<li v-for="n in 10">{{ n }} </li>

// this doesn't work

<li v-for="item in 10">{{ item.price }}</li>

কিন্তু কোথা থেকে ভ্যু অবজেক্টের উত্স জানতে পারে? যদি আমি এটি রেকর্ড করি যেমন ডক বলেছেন, আমি আইটেম এবং আইটেমের সংখ্যা পাই, তবে সামগ্রী ছাড়াই।

Comments

দুর্ভাগ্যক্রমে এটি কার্যকর হয় না, তবে ধন্যবাদ

— মাইকেইন

আপনি কেন শপিং আইটেমগুলি পুনরুক্ত করবেন না?

— বার্ট

হাই বার্ট - আমি কেবল জানতে চাই যে কীভাবে একটি ভি-দিতে হবে (সহজ উপায়) একটি (এক্স) সংখ্যার পুনরাবৃত্তি এবং ডকের উদাহরণটি কাজ করে না ...... .... খাঁটি জেএসে + এজাক্স এর এত সহজ রিটার্ন <9 বা বা বা, তবে এই পদ্ধতিতে এটি কাজ করে না ...

— মাইকেইন

দুটি স্বতন্ত্র মোড আছে v-for; যখন এটি একটি পূর্ণসংখ্যার বিরুদ্ধে ডাকা হয় এবং যখন এটি অ্যারের বিরুদ্ধে ডাকা হয়। এই মোডগুলি মিশ্রিত করে এবং অ্যারের সামগ্রীতে অ্যাক্সেস নিয়ন্ত্রণ করতে একটি পূর্ণসংখ্যা ব্যবহার করার চেষ্টা করার ফলে সমস্যা দেখা দিতে পারে। আপনার যদি অ্যারের একটি উপসেট প্রয়োজন হয় তবে আপনি এটি ফিল্টার করতে পারেন।

— জেসন অ্যালার

Answer 1

আপনি একটি পরিসীমাতে একটি সূচক ব্যবহার করতে পারেন এবং তারপরে সূচিটি অ্যাক্সেস করতে পারেন:

<ul>
  <li v-for="index in 10" :key="index">
    {{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
  </li>
</ul>

আপনি আরও তথ্যের জন্য অফিসিয়াল ডকুমেন্টেশন চেক করতে পারেন ।

Comments

এটি কাজ করে: :) আমি এটিকে কিছুটা <"ভি-ফর =" (এন, সূচক) তে 2 "> {{শপিং আইটেমস.প্রাইস}} </li> ==== এমএনওয়াই THXXXX কোডার ***** এ পরিবর্তন করেছি ! ====

— মাইকেইন

কীভাবে সেই 10 টি পরিবর্তনশীল করবেন ?, উপাদানটির ডেটা গঠন করুন?

— alvaro

এটি কেন 1-সূচকযুক্ত তা সম্পূর্ণ আমার বাইরে। <span v-for="i in 5">{{i}} </span>=> 1 2 3 4 5। <span v-for="(e, i) in 5">{{i}} </span>0-ইনডেক্সিং পেতে ব্যবহার করুন ।

— ggorlen

আমি লক্ষ্য করেছি যে

— শপিংআইটেমগুলি

Answer 2

আমি ডভ বেনিয়ামিনের সহায়তায় এটির সমাধান করেছি:

<ul>
  <li v-for="(n,index) in 2">{{ object.price }}</li>
</ul>

এবং অন্য পদ্ধতি, V1.x এবং vue.js এর 2.x উভয়ের জন্য

Vue 1:

<p v-for="item in items | limitBy 10">{{ item }}</p>

Vue2:

// Via slice method in computed prop

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
   filteredItems: function () {
     return this.items.slice(0, 10)
     }
  }

Answer 3

আপনি দেশীয় জেএস স্লাইস পদ্ধতিটি ব্যবহার করতে পারেন:

<div v-for="item in shoppingItems.slice(0,10)">

স্লাইস () পদ্ধতিটি নির্বাচিত উপাদানগুলিকে একটি অ্যারেতে নতুন অ্যারে অবজেক্ট হিসাবে ফিরিয়ে দেয়।

মাইগ্রেশন গাইডের টিপসের উপর ভিত্তি করে: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy- ফিল্টার

Comments

ধন্যবাদ, সেরা উত্তর

— সমাধান স্পিরিট

Answer 4

আমাকে parseInt()ভি-তে বলতে যুক্ত করতে হয়েছিল কারণ এটি একটি সংখ্যার দিকে চেয়েছিল।

<li v-for="n in parseInt(count)" :key="n">{{n}}</li>

Answer 5

একই রেঞ্জের ভি-ফর জন্য :

<li v-for="n in 20 " :key="n">{{n}}</li>

Comments

দয়া করে প্রথমে টিডিহুলস্টার উত্তরটি পরীক্ষা করে দেখুন ।

— বেস্টহোস্ট

Answer 6

২.২.০+ তে, কোনও উপাদান সহ ভি-ফর ব্যবহার করার সময়, এখন একটি কী প্রয়োজন ।

<div v-for="item in items" :key="item.id">

সূত্র