使用 Vue 3 前端组件处理来自 .NET 后端的 JSON 对象

Question

我目前正在使用 Vue 3 和 .NET Web API（EF 核心 5）开发 SPA。我想显示一个艺术家列表，其中每个艺术家都有多个与之相关的流派。我已经成功地在我的 webAPI 中建立了艺术家和流派之间的多对多关系：

Artist.cs

namespace API.Models {
    public class Artist {
        [Key]
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public List<Genre> Genres { get; } = new List<Genre>();
    }
} 

Genre.cs

namespace FindAMusicianApi.Models {

    public class Genre {
        [Key]
        public int Id { get; set; }
        public string Name { get; set; }

        public List<Artist> Artists { get; } = new List<Artist>();

    }
}

ArtistController.cs

        public ArtistController( FindAMusicianContext context ) {
            _context = context;
        }

        [HttpGet]
        public async Task<IEnumerable<Artist>> Get() {
            List<Artist> artistList = await _context.Artists
            .Include(artist => artist.Genres)
            .ToListAsync();
            return artistList; 
        }

... 它有效！在我的 vue 应用程序中通过 axios 调用时，我得到以下响应：

[
  {
    "id": 1,
    "name": "Sarah Hyland",
    "description": "...",
    "genres": [
      {
        "id": 2,
        "name": "Pop",
        "artists": []
      },
      {
        "id": 3,
        "name": "Country",
        "artists": []
      }
    ]
  },
  {
    "id": 2,
    "name": "Oscar Thomsen",
    "description": "... ",
    "genres": [
      {
        "id": 1,
        "name": "Rock",
        "artists": []
      },
      {
        "id": 4,
        "name": "Hip Hop",
        "artists": []
      }
    ]
  }
]

现在到手头的问题；我想在 ArtistList 中显示所有艺术家：

ArtistList.vue

<template>
  <section class="row row-cols-1 row-cols-md-3 g-4">
    <artist-item
      v-for="(artist, i) in artistList"
      :key="i"
      :id="artist.id"
      :name="artist.name"
      :description="artist.description"
      :genres="artist.genres"
    />
  </section>
</template>

<script>
import axios from 'axios'
import { reactive, toRefs } from 'vue'
import ArtistItem from './ArtistItem'
export default {
  components: {
    ArtistItem,
  },
  setup() {
    const artists = reactive({ artistList: [] })
    axios('https://localhost:5001/artist/').then((response) => {
      artists.artistList = response.data
    })

    return { ...toRefs(artists) }
  },
}
</script>

通过组件中的道具：

ArtistItem.vue

<template>
  <div class="col">
    <div class="card h-100 bg-primary">
      <div class="card-body">
        <p class="d-inline-block mb-2 badge text-capitalize">{{ genres }}</p>
        <h3 class="card-title">{{ name }}</h3>
        <p class="card-text">{{ description }}</p>
      </div>
      <div class="card-footer">
        <router-link :to="{ name: 'ArtistDetails', params: { id: id } }" class="btn btn-dark">Read more</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
    name: String,
    description: String,
    genres: Array,
  },
}
</script>

...但artist.genre 显然输出

      {
        "id": 2,
        "name": "Pop",
        "artists": []
      },
      {
        "id": 3,
        "name": "Country",
        "artists": []
      }

...我当然只想要数组中的流派名称。我是 .NET 和 Vue 的新手——如果有人能指出我正确的方向，我会很高兴。谢谢！

Answer 1

你可以做另一个 v-for 并使用对象名称，你会想要在每个之后添加一些逗号，也许检查它是否是数组中的最后一项，如果是则不显示逗号。您甚至可以将计算对象创建为字符串，但这完全取决于您。

<template>
  <div class="col">
    <div class="card h-100 bg-primary">
      <div class="card-body">
        <p class="d-inline-block mb-2 badge text-capitalize">
            <span v-for="genre in genres" :key="genre.name">{{ genre.name }}</span>
        </p>
        <h3 class="card-title">{{ name }}</h3>
        <p class="card-text">{{ description }}</p>
      </div>
      <div class="card-footer">
        <router-link :to="{ name: 'ArtistDetails', params: { id: id } }" class="btn btn-dark">Read more</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
    name: String,
    description: String,
    genres: Array,
  },
}
</script>

下面是一个计算对象

<template>
  <div class="col">
    <div class="card h-100 bg-primary">
      <div class="card-body">
        <p class="d-inline-block mb-2 badge text-capitalize">{{ genreTags }}</p>
        <h3 class="card-title">{{ name }}</h3>
        <p class="card-text">{{ description }}</p>
      </div>
      <div class="card-footer">
        <router-link :to="{ name: 'ArtistDetails', params: { id: id } }" class="btn btn-dark">Read more</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
    name: String,
    description: String,
    genres: Array,
  },
  computed: {
      genreTags() {
          const genres = this.genres.map(genre => {
              return genre.name
          });

          return genres.join(', ');
      }
  },
}
</script>