Я хочу определить активные вкладки по текущему дню в vuejs - PullRequest
Новая
       37

Я хочу определить активные вкладки по текущему дню в vuejs

1 голос
/ 17 апреля 2020

На моей странице vuejs есть 7 вкладок, моя цель - активировать вкладки к текущему дню, поэтому, если сегодня пятница, то указанная вкладка c должна быть активной при первой загрузке, но я застрял и могу не переходите на другие вкладки, активная вкладка активируется только, а не другие вкладки после операторов if else, так как я должен активировать другие вкладки, когда нажимаю на нее, а не только активировать ее, когда сегодня день

enter image description here

<template>

  <div>
    <div id="tabs" class="container">
      <div class="tabs">
        <a v-on:click="timestamp = 1"
           v-bind:class="[timestamp === 1 ? 'active' : '' ]">Friday</a>
          <a
            v-on:click="timestamp = 2"
            v-bind:class="[timestamp === 2 ? 'active' : '']"
            >Thursday</a>
          <a
            v-on:click="timestamp = 3"
            v-bind:class="[timestamp === 3 ? 'active' : '']"
            >Wednesday</a>
          <a
            v-on:click="timestamp = 4"
            v-bind:class="[timestamp === 4 ? 'active' : '']"
            >Tuesday</a>
          <a
            v-on:click="timestamp = 5"
            v-bind:class="[timestamp === 5 ? 'active' : '']"
            >Monday</a>
          <a
            v-on:click="timestamp = 6"
            v-bind:class="[timestamp === 6 ? 'active' : '']"
            >Sunday</a>
          <a
            v-on:click="timestamp = 7"
            v-bind:onClick="[timestamp === 7 ? 'active' : '']"
            >Saturday</a>
        </div>

        <div class="content">
          <div v-if="timestamp === 1 " class="tabcontent">
        </div>

        <div v-if="timestamp === 2" class="tabcontent">
          Content for tab two
        </div>
        <div v-if="timestamp === 3" class="tabcontent">
          Content for tab three
        </div>
        <div v-if="timestamp === 4" class="tabcontent">
          Content for tab three
        </div>
        <div v-if="timestamp === 5" class="tabcontent">
          Content for tab three
        </div>
        <div v-if="timestamp === 6" class="tabcontent">
          Content for tab three
        </div>
        <div v-if="timestamp === 7" class="tabcontent">
          Content for tab three
        </div>

      </div>
    </div>

</template>

<script>

  import moment from 'moment';

  export default {
    data: function() {

         return {
           activetab:'',
           pageName: 'MB',
           pageDescription: 'This is MB',

        data: {
        timestamp : '',
         activetab:''
       },

   }
    },
    
    
    name: 'mb',
    
    computed: {
      timestamp : function() {
        if ( moment().format('dddd') === "Saturday"){
          return 7
         } else if ( moment().format('dddd') === "Sunday") {
          return 6
        }else if ( moment().format('dddd') === "Monday") {
          return 5
        }else if ( moment().format('dddd') === "Tuesday") {
          return 4
        }else if ( moment().format('dddd') === "Wednesday") {
          return 3
        }else if ( moment().format('dddd') === "Thursday") {
         return 2
       }else if ( moment().format('dddd') === "Friday"){
         return 1

      } else (moment().format('dddd') === "hassan")
       return 2
    }
   },
  };

</script>

1 Ответ

0 голосов
/ 17 апреля 2020

Вы пытаетесь присвоить значение вычисляемому, у которого нет установщика. Я думаю, что самый простой способ сделать это поместить исходную логику c в хук created и присвоить переменную timestamp

(И, возможно, switch может быть полезен в этой ситуации с таким количеством if) 

<script>
import moment from 'moment';
export default {
  data: function() {
    return {
       activetab:'',
       pageName: 'MB',
       pageDescription: 'This is MB',
       timestamp: 1,
       data: {
         timestamp : '',
         activetab:''
       }
     }
  },
  name: 'mb',
  created() {
    if ( moment().format('dddd') === "Saturday"){
      this.timestamp = 7
    } else if ( moment().format('dddd') === "Sunday") {
      this.timestamp = 6
    } else if ( moment().format('dddd') === "Monday") {
      this.timestamp = 5
    } else if ( moment().format('dddd') === "Tuesday") {
      this.timestamp = 4
    } else if ( moment().format('dddd') === "Wednesday") {
      this.timestamp = 3
    } else if ( moment().format('dddd') === "Thursday") {
      this.timestamp = 2
    } else if ( moment().format('dddd') === "Friday"){
      this.timestamp = 1
    } else (moment().format('dddd') === "hassan")
      this.timestamp = 2
  }
}
</script>
...