CODEWITHSUNDEEP
javascriptvue.js
Matthew Snell
Matthew Snell

Reputation: 957

Value returned via a method is not changing text to appropriate color

I am getting a list of books via a vuex query, I'd like to determine the status of that book and display the appropriate color. Below I'm using a method to return the color name and binding that to the v-icon, but it isn't working and applies no color at all. Should I not be using a method?

<v-list>
  <v-list-item v-for="book in books" :key="book.id" link two line>
    <v-list-item-icon>
      <v-icon :color="status(book)">mdi-circle</v-icon>
    </v-list-item-icon>
  </v-list-item>
</v-list>

Here is the method:

methods: {
    status(value) {
      this.books.forEach(book => {
        if (value.id == book.id) {
          let bd = new Date(book.date_begin);
          let ed = new Date(book.date_end);
          let now = new Date();
          if (now >= bd && now < ed) {
            return "green";
          } else if (now < bd) {
            return "yellow";
          } else if (now > ed) {
            return "grey";
          } else {
            return "black";
          }
        }
      });
    }
  },

Upvotes: 0

Views: 34

Answers (2)

Abbas
Abbas

Reputation: 1255

You are returning from an Array method forEach. In this case, return works as break and stops the execution of the loop. This should work:

methods: {
  status(book) {
    let bd = new Date(book.date_begin);
    let ed = new Date(book.date_end);
    let now = new Date();
          
    if (now >= bd && now < ed) {
      return "green";
    } else if (now < bd) {
      return "yellow";
    } else if (now > ed) {
      return "grey";
    } else {
      return "black";
    }
  }
}

BTW: You don't even need to use a loop as you are already passing the book object to the status method.

Upvotes: 1

artem
artem

Reputation: 457

  1. forEach doesn't return value (JS spec)
  2. method status doesn't return value (bug in your code)
methods: {
   status(value) {
      const { date_begin, date_end } = this.books.find(({ id }) => id === value.id);
      const bd = new Date(date_begin);
      const ed = new Date(date_end);
      const now = new Date();
      if (now >= bd && now < ed) { return "green"; }
      if (now < bd) { return "yellow"; }
      if (now > ed) { return "grey"; }
      return "black";
   }
}

Upvotes: 0

Related Questions