Vue вычисляемая функция для сопоставления элементов из 2 разных массивов

Question

В настоящее время я работаю с Vue v2.xx У меня есть массив:

sectionTitles = ['Technology', 'Data', 'Poverty and Research', ...]

, и у меня есть jobsData, который выглядит так:

[{'title': 'Software Engineer', mainTag: 'Data', ...}...]

Я хочу отобразить <li> в <ul>, когда sectionTitle соответствует job.mainTag.

Я читал в Vue документах, что вы не должны объединять v-if с v-for, поэтому я создал вычисляемый метод, чтобы иметь возможность фильтровать задания. Вот что я сделал до сих пор:

window.onload = function () {
    var app = new Vue({
    delimiters: ['${', '}'],
    el: '#app',
    data: {
      jobs: jobsData,
      sectionTitles: ['Data','Poverty Research Unit', 'Technology']
    },
    computed: {
      matchingTitles: function (sectionTitle) {
        return this.jobs.filter(function (job, sectionTitle) {
          job.mainTag === sectionTitle;
        })
      }
    }
  })
}

<div id="app">
  <template v-for="title in sectionTitles">
    <h4 class="h3">{{ title }}</h4>
    <ul class="list-none p-0 color-mid-background" id="jobs-list">
      <li class="py-1 px-2" v-for="job in matchingTitles(title)">
        <a :href="`${job.url}`">
          ${job.title}
        </a>
      </li>
    </ul>
  </template>
</div>

Таким образом, я хочу отображать <li>, только когда sectionTitle (например, Data) соответствует job.mainTag. Как я могу go добиться этого в Vue?

Answer 1

Измените ваш вычисленный метод на просто метод. Затем измените ваш фильтр, чтобы вернуть значение. Также для отображения в Vue вы хотите использовать {{....}}, а не ${...}

new Vue({
  el: '#app',
    data: {
      jobs: [{'title': 'Software Engineer', mainTag: 'Data'}],
      sectionTitles: ['Data','Poverty Research Unit', 'Technology']
    },
    methods: {
      matchingTitles: function (sectionTitle) {
        return this.jobs.filter ((job)=>{
          return job.mainTag === sectionTitle;
        })
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template v-for="title in sectionTitles">
    <h4 class="h3">{{ title }}</h4>
    <ul class="list-none p-0 color-mid-background" id="jobs-list">
      <li class="py-1 px-2" v-for="job in matchingTitles(title)">
        <a :href="job.url">
          {{job.title}}
        </a>
      </li>
    </ul>
  </template>
</div>

Answer 2

@ ответ Депперма работает хорошо (+1), но я предложу более эффективную альтернативу. Вычисленные свойства кэшируются , поэтому вы можете избежать работы matchingTitles() при повторном рендеринге. Кроме того, может быть проще понять шаблон самостоятельно, без необходимости переходить к реализации matchingTitles().

Я рекомендую вычислять весь список для итерации, отображая sectionTitles в соответствующий объект итератора:

computed: {
  items() {
    return this.sectionTitles.map(title => ({
      title,
      jobs: this.jobs.filter(job => job.mainTag === title)
    }))
  }
}

Затем вы обновите ссылки в своем шаблоне, чтобы использовать этот новый вычисленный объект:

<template v-for="item in ?items?">
  <h4>{{ item.title }}</h4>
  <ul>
    <li v-for="job in ?item.jobs?">
      <a :href="job.url">
        {{ job.title }}
      </a>
    </li>
  </ul>
</template>

new Vue({
  el: '#app',
    data: {
      jobs: [{'title': 'Software Engineer', mainTag: 'Data'}],
      sectionTitles: ['Data','Poverty Research Unit', 'Technology']
    },
    computed: {
      items() {
        return this.sectionTitles.map(title => ({
          title,
          jobs: this.jobs.filter(job => job.mainTag === title)
        }))
      }
    }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<div id="app">
  <template v-for="item in items">
    <h4 class="h3">{{ item.title }}</h4>
    <ul class="list-none p-0 color-mid-background" id="jobs-list">
      <li class="py-1 px-2" v-for="job in item.jobs">
        <a :href="job.url">
          {{ job.title }}
        </a>
      </li>
    </ul>
  </template>
</div>