How to make my for loop increment in my vuejs method ^

Question

ok so this isn't really some clean code i know. What i am trying to do here is that whenever the index in my v-for reach 3, i wanna print out a day in my weekday array.

Right now in my methods the afficherJour(index) function the i doesn't seem to increment ( it always stay at 0 ) so everytime my index reach 3%3 = 0 it only prints out Monday, but i want Monday, Tuesday, etc..

Any idea to fix this ? thank you !

<template>
  <div id="app">
    <div>
      <h1>
        <span>Weather</span>
      </h1>
    </div>
    <div>
      <span>Votre location actuelle est: {{this.city}}</span>
    </div>
    <span>il fait: {{this.forecast[0]}}</span>
    <div>
      <ul v-for="(user, index) in forecast" :key="user.main">
        <li>{{afficherJour(index+1)}}Temperature min: {{user.main.temp_min}}, Temperature max: {{user.main.temp_max}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
//import {getCity, getForecast} from '@/api/api.js'
import * as api from "@/api/api";
//import Forecast from '@/components/Forecast';
//import HeaderWeather from '@/components/HeaderWeather';
//<span>il fait: {{this.forecast}}</span>
export default {
  name: 'App',
  components: {

    //HeaderWeather
  },
  data(){
    return {
      city: undefined,
      forecast: [],
      weekday: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
      lat: undefined,
      temp_max: [],
      list: undefined
    }
  },
  methods: {
    afficherJour(index){
      for (let i = 0; i < this.weekday.length; i++){
        if(index %8 == 0){
          return this.weekday[i];
        }
      }

Harshal Patil · Accepted Answer · 2020-03-16 03:16:15Z

1

You do not need for loop. Just use the index variable:

function afficherJour(index) {

    const loop = Math.trunc(index / 7);
    const mod = index % 7;

    return mode === 0
        ? this.weekday[(loop) % 7]
        : undefined;
}

Also, do not use index + 1 in your component template. Just pass, the index variable to afficherJour function from v-for.

answered Mar 16, 2020 at 3:16

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make my for loop increment in my vuejs method ^

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related