用Vue 3前端组件从.NET后端处理JSON对象

Question

我目前正在使用Vue 3和.NET Web (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>