如何在 vue 组件中定义变量？ (Vue.JS 2)

Posted 2023-02-22

【中文标题】如何在 vue 组件中定义变量？ (Vue.JS 2)

【英文标题】：How to define a variable in vue component ? (Vue.JS 2)

【发布时间】：2017-08-29 16:36:41

【问题描述】：

我的 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 

但是，好像错了

我如何正确定义它？

【问题讨论】：

你为什么不使用getter？

【参考方案1】：

您可以使用一种方法来获得该功能，因为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
  
  ...

【讨论】：

item.received_at 取自循环 <div class="panel-group"v-for="item in list">。它在computed中不可读

item 必须是数据属性？

data() return item: this.$store.state.transaction.list ,。像这样？

是的，我见过。但似乎它仍有待在data ()

中定义

@samueltoh 添加计算出的status() 没有帮助吗？

【参考方案2】：

你需要使用data：

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