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

Vue.js相关问答推荐

无法解析组件:google—pay—button

使用插槽的VUE 3工作台

Vue Js Composition Api 未定义(读取名称)

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

如何使用 vue 或 javascript 向服务器发送密码?

如何解决 Vue.js 中的相邻 JSX 元素必须包含在封闭标记中问题

vue.js 在 App.vue 中获取路由名称

将检测外部点击自定义指令从 Vue 2 迁移到 Vue 3

使用 Vue.js (cdn) 在特定元素上切换显示/隐藏

如何使表格行可点击并展开行 - vue.js - element-ui

Vuejs:我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具?

v-if inside v-for - 在两列中显示项目列表

我可以修改 Vue.js VNodes 吗?

Vue CLI - 将构建输出组合到单个 html 文件

样式化 Vue 插槽

Vuejs - 使用 v-if 切换的保持活动组件

Vue.js 中的 CSS 框架

在 Vuejs 中全局导入 Axios 方法

Vuex 模块Mutations

理解 Vue 中的this关键字