如何在 Vue.JS 中显示数组的一个对象答案

【问题标题】：How do I display one object of an array in Vue.JS如何在 Vue.JS 中显示数组的一个对象
【发布时间】：2021-02-23 16:13:04
【问题描述】：

假设我在 Vue.JS 中有这个对象列表

data () {
return{
  examples: [
    {
      exampleID: 5,
      exampleText: 'foo'
    },
    {
      exampleID: 3,
      exampleText: 'bar'
    }
  ]
}
}

现在假设我想在我之前创建的元素中显示 exampleID 为 3 的对象

   <Task 
  v-for="example in examples"
  :key="example.exampleID"
  :example="example"
/>

我想显示对象中的所有内容（ID 和文本）

任务组件：

<template>
    <div class="exercise">
        <div class="exercise-id">
            <h1>ID NUMBER: {{ example.exampleID }}</h1>
        </div>
        <div class="exercise-task">
            <h2>{{ example.exampleText}}</h2>
        </div>
    </div>
</template>
 
<script>
 
export default {
  name: 'Task',
  props: ['example']
}
</script>

【问题讨论】：

你的问题不够清楚，请分享Task组件代码
任务组件位于组件文件夹的外部文件中。这是代码pastebin.com/T1czudfh
Task组件有不同的prop
尝试在 v-for 语句下面添加这个...................... v-show="example.exampleID === 3"
@DavidD 如果以下答案运行良好，请点赞，这样会令人鼓舞。谢谢

标签： javascript arrays vue.js object vuejs2

【解决方案1】：

您不应该在同一个元素中使用v-if 和v-for，在这种情况下，我建议使用只返回所需示例的计算属性：

data () {
return{
  examples: [
    {
      exampleID: 5,
      exampleText: 'foo'
    },
    {
      exampleID: 3,
      exampleText: 'bar'
    }
  ]
}
},
computed:{
    myExample(){
       return this.examples.find(ex=>ex.exampleID===3)
    }
}

然后像这样渲染它：

  <Task   :example="myExample"/>

【讨论】：

谢谢你，这个和 v-show 指令一样好用，但如果你说它更高效，我仍然会坚持你的解决方案！

【解决方案2】：

不使用 v-for 的另一种有效方法是

data () {
return{
  examples: [
    {
      exampleID: 5,
      exampleText: 'foo'
    },
    {
      exampleID: 3,
      exampleText: 'bar'
    }
  ],
  id: 3
}
},
computed:{
    myExample(){
       return id => this.examples.find(ex=>ex.exampleID===id)
    }
}

渲染部分会像

<Task :example="myExample(id)"/>

通过这种方式，您无需在计算属性中将值硬编码为 3。

【讨论】：

computed 是一个属性而不是一个方法，它不接受参数，尝试用this 来调用它，比如return this.examples.find(ex=>ex.exampleID===this.id) 和<Task :example="myExample"/>
您能提供运行示例吗？您可以使用此 answer 中的运行示例