Vue 2按乐器名称列出乐队成员，但只显示一次乐器名称。

Question

我可以按乐器名称列出乐队成员，但希望只显示一次乐器名称，而不是为巴松组中的每个人显示乐器名称。我的想法是提取一组不同的工具名称，并执行v-如果将成员的工具名称与迭代的集合值进行比较，并且只在成员的数据属性instrumentName与工具名称集的当前值匹配时才显示成员。通过下面的代码，我得到了一个错误"instNames是没有定义的“。我仍然在学习Vue和Nuxt，并试图摆脱WebMatrix，这是我的网站最初的平台。我需要的另一件事是将一个instrumentFilename (图片)附加到每个不同的instrumentName上。任何帮助都是非常感谢的！

<template>
  <div class="block bg-blue-200 w-96 p-6 m-auto">
    <table>
      <tr v-for="inst in instNames">
        <td>{{ inst.instrumentName }} <img :src="'/images/' + inst.instrumentFilename" >      
        <td v-for="member in members" :key="member.id">      
          <div v-if="member.instrumentName == inst.instrumentName"> </div>
        
          <div>{{ member.firstname }} {{ member.lastname }} </div>
          <div v-if="$auth.loggedIn" class="block">
            <p v-if="!member.email == ' '" class="ml-10"> Email: {{ member.email }} </p>
            <p v-if="!member.telephone == ' '" class="ml-10"> Home: {{ member.telephone }} </p>
            <p v-if="!member.telephone2 == ' '" class="ml-10">Cell: {{ member.telephone2 }}</p>
            <p v-if="!member.street == ' '" class="ml-10">Address: {{ member.street}}</p>          
            <p v-if="!member.city == ' '" class="ml-28">{{ member.city}}, {{ member.zip}}</p>
          </div>
        </td>
      </tr>
    </table>      
  </div>
  
</template>

<script>
export default {
  async asyncData(context){
    const { data } = await context.$axios.get('/api/members')        
    return {
      members : data     
    }
  },
 
  computed: {
    instNames: function() {      
      instNames = [...new Set(this.members.map(x => x.instrumentName))]
      return instNames
    } 
  } 
}
</script>

Answer 1

您的计算属性尝试分配instNames，但在任何地方都没有声明。但是，您并不真正需要局部变量，因为它没有被使用。您只需返回计算出来的集合：

export default {
  computed: {
    instNames: function() {
      //instNames = [...new Set(this.members.map(x => x.instrumentName))]
      //^^^^^^^^^ ❌ not declared

      // Option 1: Declare it with `let` or `const`
      const instNames = [...new Set(this.members.map(x => x.instrumentName))]
      return instNames

      // Option 2: Just return the calculation
      return [...new Set(this.members.map(x => x.instrumentName))]
    } 
  } 
}

但是模板试图将instrumentName和instrumentFilename从计算出来的instNames (字符串数组，而不是对象)中呈现出来。假设这些值来自this.members，则可以更新计算值以返回这些字段：

export default {
  computed: {
    instNames: function() {
      const instName = this.members.map(x => ({
        instrumentName: x.instrumentName,
        instrumentFilename: x.instrumentFilename,
      }))

      // remove duplicates here ...
      
      return instName
    } 
  } 
}

最后，模板v-if条件没有正确检查非空字符串。对于!member.email == ' '，!操作符具有优先级，它检查member.email是否有falsy值，该值是String的空字符串。然后将其与单个空间进行比较，因为空间不是虚假的，所以总是false。您可以将整个比较替换为对真实值的简单检查：

<p v-if="member.email">...</p>
<p v-if="member.telephone">...</p>
<p v-if="member.telephone2">...</p>
<p v-if="member.street">...</p>
<p v-if="member.city">...</p>

Answer 2

以上的评论是无价的，所以非常感谢。但是，返回数组的唯一性仍然存在问题；显然，一个集合将多个对象引用计算为唯一。因此，我最终使用了以下代码：

computed: {
    instNames: function() {      
    
      const instName = this.members.map
      (({ instrumentName, instrumentFilename }) => ({ instrumentName, instrumentFilename}))
      const instNameArray = []
      const instNameSet = new Set()
      for (const object of instName) {
        const objectJSON = JSON.stringify(object)
        if(!instNameSet.has(objectJSON)) {
          instNameArray.push(object)
        }
        instNameSet.add(objectJSON)
      }
      console.log(instNameArray)
         
      return instNameArray
    } 
  }