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

What are some tactics for avoiding movement in the presence of a border setting?

Learn how to use Javascript and ASP.NET to refresh the parent page in Mozilla Firefox browser

What are some alternatives for integrating React production build files apart from utilizing Express?

Is it advisable to approve automatic pull requests initiated by dependabot for updating the yarn.lock file?

The issue with onclientclick in Asp.Net button

What is the best way to transform this into an HTML readable code?

What could be causing my AngularJS controller to fail in my jasmine test?

Error when sending Angular 4 GET request with multiple Headers results in a 400 bad request code

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

The loss of Webgl context that remains unrecovered

What are the steps to incorporate @svgr/webpack into turbopack within a next.js project?

How can I determine in JavaScript if the Backspace key is being long pressed on iOS or Android devices?

Writing a CSV file to AWS S3 proves to be unsuccessful

DOJO Dialogue Box Report - Problem

Is there any more Angular code to be bound using ng-bind-html or ng-bind?

Effortlessly uploading large files using axios

How can you merge the class attribute with the ng-class directive based on boolean values?

Ways to transfer information between different components in Vue.js

Ways to incorporate a unique debounce technique where the function is only executed every nth time

Utilizing Vue's data variables to effectively link with methods and offer seamless functionality