Vue中如何在现有数组获取逻辑中过滤并仅展示项目名称？

Absolutely! You have a few practical approaches depending on whether you want to store only the project names in your state, or keep the full media objects but filter/display only project names in your template. Let’s break down each option:

Option 1: Extract project names immediately when fetching data #

If you don’t need the full media objects and only want to store project names in your state, use Array.map() right when processing the response. This is straightforward and efficient:

fetch(context, id) {
  if (context.getters['isEmpty']) {
    Vue.api.mediasetting.index()
      .then(response => {
        var medias = response.data[key];
        // Extract only project_name from each media object
        const projectNames = medias.map(media => media.project_name);
        context.commit('setMedias', projectNames);
        // Now your state holds an array like ["Project A", "Project B"]
      })
      .catch(error => {
        // Don’t forget error handling!
        console.error("Failed to fetch media settings:", error);
      });
  }
}

Option 2: Use a Vue Filter for template display #

If you need to keep the full media objects in state but only want to show project names in your template, define a Vue filter:

Step 1: Define the filter (local or global) #

Local filter (in your component):

export default {
  filters: {
    getProjectName(media) {
      return media?.project_name || 'No project name';
    }
  }
}

Global filter (in your main.js):

Vue.filter('getProjectName', function(media) {
  return media?.project_name || 'No project name';
});

Step 2: Use the filter in your template #

<ul>
  <li v-for="media in medias" :key="media.id">
    {{ media | getProjectName }}
  </li>
</ul>

Option 3: Use a Computed Property (for reusability) #

If you need to reuse the list of project names across your component, a computed property is ideal:

export default {
  computed: {
    projectNames() {
      // Assuming `medias` is available from Vuex or component data
      return this.medias.map(media => media.project_name).filter(Boolean);
      // filter(Boolean) removes any undefined/null project names
    }
  }
}

Then in your template:

<ul>
  <li v-for="name in projectNames" :key="name">
    {{ name }}
  </li>
</ul>

Quick decision guide: #

• Option 1: Use if you only need project names stored in state.
• Option 2: Use if you need full objects but just want to display project names.
• Option 3: Use if you need to reuse the project name list multiple times in your component.

内容的提问来源于stack exchange，提问作者user6632933