Vuejs v-if语句添加属性

时间:2017-10-08 08:58:14

标签: vuejs2

我想根据可用性显示详细信息,我试图在v-if语句中添加星期几的计算属性。我尝试了不同的方法和连接,但似乎无法使用它,我使用的是firebase但重新创建了以下代码。

<template>
  <div>  
    <h2>Practitioners Available for {{ getDayOfTheWeek }}</h2>
    <div v-for='prac in practitioners'>
      <div v-if='prac.availability.getDayOfTheWeek'> 
         // Display details
         {{ prac.name }}
      </div>
    </div>
  </div>
</template>

<script>                 
export default {                  
  data () 
    return {             
      practitioners: {    
        0: {             
          name: 'Matt',  
          availability: {
            sunday: true,
            monday: true,
            tuesday: true,
            wednesday: true,
            thursday: true,
            friday: true,
            saturday: true
          }
        } 
      }  
    }  
  },

  computed: {            
    getDayOfTheWeek: function () {  
      var date = new Date()
      var day = date.getDay()
      var daysOfTheWeek = [
        'sunday',
        'monday',
        'tuesday',
        'wednesday',
        'thursday',
        'friday',
        'saturday'
      ]
      return daysOfTheWeek[day]
    }
  }                                                                                                                                    
}
</script>

感谢任何帮助,谢谢。

1 个答案:

答案 0 :(得分:0)

而不是v-if="prac.availability.getDayOfTheWeek"使用v-if="prac.availability[getDayOfTheWeek]"

您的可用性对象没有getDayOfTheWeek属性,v-if="prac.availability.getDayOfTheWeek"等同于v-if="prac.availability['getDayOfTheWeek']"

相关问题