vue 구성 요소에서 변수를 정의하는 방법(Vue).JS 2)

vue 구성 요소에서 변수를 정의하는 방법(Vue).JS 2)

내 vue 구성 요소는 다음과 같다.

<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 to definition the.status가변적

그래서, 그.status변수는 조건에 사용될 수 있다.

나는 이렇게 노력한다.

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

하지만, 그것은 잘못된 것 같다.

어떻게 정의해야 할까?

메소드를 사용하여 기능을item변수는 의 범위 밖에 존재하지 않는다.v-for

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

구성 요소:

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

사용할 필요가 있음data:

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

참조URL: https://stackoverflow.com/questions/43207881/how-to-define-a-variable-in-vue-component-vue-js-2