如何在vue组件中定义一个变量? (Vue.JS 2)
How to define a variable in vue component ? (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>
我想定义 status
变量
所以,status
变量可以用在condition
我这样试:
{{ status = item.received_at ? item.received_at : item.rejected_at }}
但是,好像错了
如何正确定义?
您需要使用 data
:
export default {
...
data: function() {
return {
status: false
}
},
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
您可以使用一种方法来实现 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
}
...
}
我的 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
变量可以用在condition
我这样试:
{{ status = item.received_at ? item.received_at : item.rejected_at }}
但是,好像错了
如何正确定义?
您需要使用 data
:
export default {
...
data: function() {
return {
status: false
}
},
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
您可以使用一种方法来实现 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
}
...
}