How to define a variable in vue component ? (Vue.JS 2)

Question

My vue component is like this :

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <div class="alert">
                    {{ status = item.received_at ? item.received_at : item.rejected_at }}
                    <p v-if="status">
                        {{ status }} - {{ item.received_at ? 'Done' : 'Cancel' }}
                    </p>
                    <p v-else>
                        Proses
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        ...
        computed: {
            list: function() {
                return this.$store.state.transaction.list
            },
            ...
        }
    }
</script>

I want define the status variable

So, the status variable can be used in condition

I try like this :

{{ status = item.received_at ? item.received_at : item.rejected_at }}

But, seems it was wrong

How I define it correctly?

why don't you use a getter?

Amresh Venugopal
– Amresh Venugopal

2017-04-04 13:00:09 +00:00
Commented Apr 4, 2017 at 13:00 — Amresh Venugopal
– Amresh Venugopal, Commented Apr 4, 2017 at 13:00

Amresh Venugopal · Accepted Answer · 2017-04-05 04:18:04Z

3

You can use a method to have the functionality as the item variable would not be present outside the scope of the v-for

 ...
 <div class="alert">
   <p v-if="status(item)">
      {{ status(item) }} - {{ item.received_at ? 'Done' : 'Cancel' }}
   </p>
   <p v-else>
      Proses
   </p>
 </div> 
 ...

and in the component:

methods: {
  ...
  status (item) {
    return (item) 
             ? (item.received_at) ? item.received_at : item.rejected_at
             : false
  }
  ...
}

edited Apr 5, 2017 at 4:18

answered Apr 4, 2017 at 13:02

Amresh Venugopal

9,5895 gold badges41 silver badges52 bronze badges

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

10 Comments

samuel toh Over a year ago

item.received_at taken from the loop <div class="panel-group"v-for="item in list">. It is not readable in the computed

Amresh Venugopal Over a year ago

item must be a data property?

samuel toh Over a year ago

data() { return { item: this.$store.state.transaction.list } },. Like that?

samuel toh Over a year ago

Yes, I've seen it. But seems it remains to be defined in the data ()

Amresh Venugopal Over a year ago

@samueltoh does adding the computed status() not help?

|

Happyriri · Accepted Answer · 2017-04-04 12:59:50Z

3

You need to use data :

export default {
    ...
    data: function() {
        return {
            status: false
        }
    },
    computed: {
        list: function() {
            return this.$store.state.transaction.list
        },
        ...
    }
}

answered Apr 4, 2017 at 12:59

Happyriri

4,4532 gold badges20 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to define a variable in vue component ? (Vue.JS 2)

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related