CODEWITHSUNDEEP
vue.js
JellyFox
JellyFox

Reputation: 35

If/else statement in vuejs computed not working

    prop: ['type', 'alertSubject'],
    computed: {
         alertTitle() {
            let title = ""
            if(this.alertSubject == "requestStatusUpdate") {
                if(this.type == 'success') {
                    title = 'Status update is requested'
                }
                else if(this.type == 'waiting') {
                    title = 'Requesting status update'
                }
                else if(this.type == 'error') {
                    title = 'Status update not sent'
                }
                
            }
            return title
        },
   }

I feel like this should be working but its not. All my computed values only return what the starting value of "title" is. Am I missing something obvious?

Edit: I was missing something obvious, I'm an idiot. Sorry for wasting everyone's time, I was missing an "s" on "props"

Upvotes: 0

Views: 1547

Answers (1)

adelriosantiago
adelriosantiago

Reputation: 8124

Your code is working right, just like this snippet:

<html>

<head>

</head>

<body>

  <div id="container">
    Try "success", "waiting" or "error": <input type="text" id="container" placeholder="enter text" v-model="type">
    <p>{{ value }}</p>
    Message: {{alertTitle}} ...
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
  <script>
    new Vue({
      el: '#container',
      data: {
        alertSubject: "requestStatusUpdate", // Fake prop
        type: "success", // Fake prop
      },
      computed: {
        alertTitle() {
          let title = ""
          if (this.alertSubject == "requestStatusUpdate") {
            if (this.type == 'success') {
              title = 'Status update is requested'
            } else if (this.type == 'waiting') {
              title = 'Requesting status update'
            } else if (this.type == 'error') {
              title = 'Status update not sent'
            }
          }
          return title
        },
      }
    });
  </script>

</body>

</html>

Either this.alertSubject or this.type doesn't exists.

Print these values like

<div>
 alertSubject: {{alertSubject}}
 type: {{type}}
</div>

So that you see if the values are there.

Upvotes: 1

Related Questions