Utilizing Template Styling for Iterating through Lists in Vue.js

Question

Utilizing Template Styling for Iterating through Lists in Vue.js

I would like the output format to display one player value followed by one monster value, repeating this pattern for each pair of values.

new Vue({
  el: app,
  data: {
    output: {
      player: [1, 5, 61, 98, 15, 315, 154, 65],
      monster: [2,14, 15, 113, 19, 22,12,54,64],
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>
    <h6 v-for="i in Object.keys(output.player)">Player value :{{output.player[i]}}</h6>
    <h6 v-if="output.monster[i]">Monster value :{{output.monster[i]}}</h6>
  </span>
</div>

javascript vue.js

Answer 1

Answer №1

Iterate through each index and use a template to encapsulate the player and monster data:

new Vue({
  el: app,
  data: {
    output: {
      player: [1, 5, 61, 98, 15, 315, 154, 65],
      monster: [2,14, 15, 113, 19, 22,12,54,64],
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>
    <template v-for="i in output.player.length" :key="i">
      <h6>Player value :{{output.player[i]}}</h6>
      <h6>Monster value :{{output.monster[i]}}</h6>
    </template>
  </span>
</div>

Please be aware that this code assumes the arrays player and monster are always of equal length. You will need to account for discrepancies in size if they are not.

Answer 2

Iterate through each index and use a template to encapsulate the player and monster data:

new Vue({
  el: app,
  data: {
    output: {
      player: [1, 5, 61, 98, 15, 315, 154, 65],
      monster: [2,14, 15, 113, 19, 22,12,54,64],
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>
    <template v-for="i in output.player.length" :key="i">
      <h6>Player value :{{output.player[i]}}</h6>
      <h6>Monster value :{{output.monster[i]}}</h6>
    </template>
  </span>
</div>

Please be aware that this code assumes the arrays player and monster are always of equal length. You will need to account for discrepancies in size if they are not.

Utilizing Template Styling for Iterating through Lists in Vue.js

Answer №1

Similar questions

Dealing with the challenge of sorting and editing one div at a time

Using axios to make a request to a REST API

A JavaScript function that fetches the color name based on either the RGB value or the Hexadecimal value

What is the best way to retrieve information from a local JSON file and store it in the state of

Monitor the user's attendance by utilizing two separate for loops

The Redux state fails to start with the default initial state

How can I direct to an HTML file using Vue 3 router?

Why do variables maintain the same value across modules when using the require function in Node.js?

The absence of a key is causing an issue - deletion cannot be completed

KineticJs: Enhancing Rotation with Multitouch Capability

Can someone explain how I can effectively test the internal workings of a promise using Jasmine?

Incorporating an external SVG link into a React application

Prevent Mui popover from closing when clicking outside

Executing a jQuery AJAX function when the timeout occurs

User currently signed in: What specific information should be transmitted to the web browser?

What is the method for retrieving Vue Js computed properties?

Clicking on "Ng-Click" will add a fresh row to the table using Angular

What are some ways to utilize an empty array that has been declared in React's initial state?

Google Script: How to automatically open a newly created text document after its creation

Sending arguments from an NPM script to a NodeJS script