私の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>
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
},
...
}
}