对 Prop（来自父级）对象的属性进行计算并将结果放入模板的最佳方法

Posted 2023-02-23

【中文标题】对 Prop（来自父级）对象的属性进行计算并将结果放入模板的最佳方法

【英文标题】：Best way to do calculation on a property of a Prop(coming from the parent) object and put the result in the template

【发布时间】：2020-04-14 18:51:13

【问题描述】：

我有一个正在传递给子组件的对象，我想在子组件模板中显示这些值。但是，该对象包含数组和对象的属性，因此我需要在设置值之前对它们进行一些解析/操作。

对象：

  "id": "111",
  "ip": "10.192.1.112",
  "profiles": [
    "Japan",
    "Japan222"
  ],
  "network": [
    
      "plan_id": "PLAN-UUID",
      "plan_name": "1BCT"
    ,
    
      "plan_id": "PLAN-UUID",
      "plan_name": "1BCT2"
    
  ],
  "status": "LOCKED",
  "last_downloaded": "1547672769000"

子模板代码：

<label label="id" :value=this.objectFromParent.id />
<label label="ip" :value=this.objectFromParent.ip />
<label label="ip" :value= calculateProfiles />

calculateProfiles 是计算它并返回字符串值的方法在哪里？我不确定有什么好的方法来处理这个问题。

【问题讨论】：

使用computed property

啊计算道具有效。谢谢

顺便说一句，绑定时不需要this.。我不确定它是否有效，但人们通常不使用this.objectFromParent.id，objectFromParent.id 就足够了

【参考方案1】：

试试这个

<template>
  <div>
    <label label="id" :value="objectFromParent.id" />
    <label label="ip" :value="objectFromParent.ip" />
    <label label="ip" :value="calculateProfiles" />
  </div>
</template>

<script>
export default 
  props: 
    objectFromParent: 
      type: Object,
      default() 
        return 
          id: '111',
          ip: '10.192.1.112',
          profiles: ['Japan', 'Japan222'],
          network: [
            
              plan_id: 'PLAN-UUID',
              plan_name: '1BCT'
            ,
            
              plan_id: 'PLAN-UUID',
              plan_name: '1BCT2'
            
          ],
          status: 'LOCKED',
          last_downloaded: '1547672769000'
        
      
    
  ,
  computed: 
    calculateProfiles() 
      return this.profiles.join(',')
    
  

</script>

为了帮助他发表评论：

<label label="ip">
  <md-icon v-if="objectFromParent.status==='LOCKED'">lock</md-icon>
  calculateProfiles
</label>

【讨论】：

谢谢，但是如果我需要在字符串前面添加一个锁符号（lock）如果“状态：被锁定”怎么办？我该怎么办？在我返回的字符串中插入 md-icon 代码？

我认为是<md-icon v-if="objectFromParent.status==='LOCKED'">lock</md-icon>，使用指令v-if

我必须将它插入 :value 部分，这样它就不起作用了。如果您知道任何其他方式，请告诉我。

我不确定，试试我放在答案末尾的代码，看看它是否有效，