Using Vue to iterate through elements

Question

Using Vue to iterate through elements

I am struggling to loop through an array in a Vue component without duplicating the element specified in the 'v-for' directive. I have consulted the official Vue.js API documentation, as well as various online articles, but haven't found a suitable alternative for achieving this.

Here is my current code:

<div v-for="(item, index) in items">
  <foo :index="index">
  <foo/>
</div>

Desired output:

<foo :index="0"><foo/> 

<foo :index="1"><foo/>

<foo :index="2"><foo/>
//etc...

I have attempted the following code, but it does not work as expected:

<foo v-for="(item, index) in items":index="index">
<foo/>

Any assistance would be greatly appreciated! I only just started working with Vue.js yesterday.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Your HTML needs some corrections, but no worries, it can be fixed easily.

<bar v-for="(element, val) in data" :val="val"></bar>

Answer 2

Your HTML needs some corrections, but no worries, it can be fixed easily.

<bar v-for="(element, val) in data" :val="val"></bar>

Answer 3

Answer №2

<bar v-for="(element, number) in elements">
    {{number}}
</bar>

Answer 4

<bar v-for="(element, number) in elements">
    {{number}}
</bar>

Answer 5

Answer №3

Have you tried checking out this link: http://jsbin.com/kapipezalu/edit?html,js,console,output

It seems like you might have missed defining props in the foo component.

  <div id="app">
    <foo v-for="(item, index) in items" :index="index"></foo>
  </div>

  <template id="foo-temp">
    <div>
      <span>{{ index }}</span>
    </div>
  </template>

JS:

Vue.component('foo', {
  props: ['index'],
  template: '#foo-temp'
})

new Vue({

  el: '#app',

  data: {
    items: [
      {id: 1, title: 'One'},
      {id: 2, title: 'Two'},
      {id: 3, title: 'Three'}
    ]
  }

})

Quick Tip: Utilize Browser Console for helpful warnings and error messages.

Answer 6

Have you tried checking out this link: http://jsbin.com/kapipezalu/edit?html,js,console,output

It seems like you might have missed defining props in the foo component.

  <div id="app">
    <foo v-for="(item, index) in items" :index="index"></foo>
  </div>

  <template id="foo-temp">
    <div>
      <span>{{ index }}</span>
    </div>
  </template>

JS:

Vue.component('foo', {
  props: ['index'],
  template: '#foo-temp'
})

new Vue({

  el: '#app',

  data: {
    items: [
      {id: 1, title: 'One'},
      {id: 2, title: 'Two'},
      {id: 3, title: 'Three'}
    ]
  }

})

Quick Tip: Utilize Browser Console for helpful warnings and error messages.

Using Vue to iterate through elements

Answer №1

Answer №2

Answer №3

Similar questions

Every time I switch to a new Vue.js route, I find myself inexplicably redirected to the bottom of the page, leaving me scratching my head in confusion

Click to stay in the background

SignalR enables the display of identical dashboard data pulled from queries on various browsers. By utilizing SignalR/hub, MVC, and C#.NET, the data can

Modify the database once authorized by the administrator

Disable the ability to select text when double-clicking

Error in Mongoose validation: "Please provide a value for the 'first' field and the 'last' field."

Using Ruby instead of Javascript in lessc

VueJS Error: Unable to access the 'className' property of an undefined variable

The event listener for 'load' is not functioning properly within the React (Gatsby) environment

Steps for starting up an ExpressJS application

Tips for utilizing document.write() with a document rather than just plain text

Collapsed ReactJS: Techniques for compressing the Material UI TreeView following expansion

Using a React component to send data through a POST request to an API

Ways to display additional selected values in a select menu

Obtain an Array Containing all Current Page Paths in Gatsby

Angular's Enhanced Feature: Selecting Multiple Columns

Leveraging PrimeFaces and the p:ajax component, trigger Ajax within an inputText field only when keystrokes lead to changes in the field

Objects for requesting and responding

Switch between individual highcharts by selecting or deselecting checkboxes

"Enhance your website with interactive jQuery lightbox buttons for easy navigation