Как получить значение в таком массиве?

Question

[sertu]

Добрый день имеем вот такой примерный массив json

[
  {
    "fieldTypes": {
      "salary": "20000",
      "vacancyName": "Курьер",
      "geo": "РФ",
      "typeOfWork": "офис"
    },
    "commonFields": {
      "min_age": "18"
    }
  },
  {
    "fieldTypes": {
      "salary": "40000",
      "vacancyName": "Сборщик",
      "geo": "РФ",
      "typeOfWork": "офис"
    },
    "commonFields": {
      "min_age": "18"
    }

  }
]

хочу сделать небольшую фильтрацию по примеру https://codepen.io/thaekeh/pen/PoGJRKQ
все такж е по примеру но на этом моменте затык и ошибка

let tempInfo = this.info.fieldTypes

computed:{
            filteredOffer(){
                let tempInfo = this.info.fieldTypes

                // Process search input
                if (this.searchVacancyName != '' && this.searchVacancyName) {
                    tempInfo = tempInfo.filter((item) => {
                        return item.vacancyName
                            .toUpperCase()
                            .includes(this.searchVacancyName.toUpperCase())
                    })
                }
            }
        }

Спасибо

Comments

[Сергей Соколов]

какая ошибка, что пишут?

Answer 1

[Сергей Соколов]

Надо же вернуть массив всех, содержащих поисковую фразу?

computed: {
  filteredOffer() {
    const search = this.searchVacancyName.toUpperCase();
    if (0 === search.length) return this.info;

    return this.info
      .filter((item) => item.fieldTypes.vacancyName.toUpperCase().includes(search));
  }
}

Comments

[sertu]

пока новичок во vue, делаю по примеру

<script>
    var app = new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        components: {},
        data() {
            return {
                searchVacancyName:'',
                info: [],
                loading: true,
                errored: false,

            };
        },
        methods: {
            formatter(number) {
                const formatter = new Intl.NumberFormat('ru-RU', {
                    style: 'decimal',
                })
                return formatter.format(number)
            },

        },
        mounted() {
            axios
                .get('json')
                .then(response => {
                    this.info = response.data;
                })
                .catch(error => {
                    console.log(error);
                    this.errored = true;
                })
                .finally(() => (this.loading = false));

        },
        computed:{
            filteredOffer(){
                let tempInfo = this.info.fieldTypes

                // Process search input
                if (this.searchVacancyName != '' && this.searchVacancyName) {
                    tempInfo = tempInfo.filter((item) => {
                        return item.vacancyName
                            .toUpperCase()
                            .includes(this.searchVacancyName.toUpperCase())
                    })
                }
            }
        }

    });
</script>

<input class="filter_input" v-model="searchVacancyName" placeholder="Должность">

<code lang="html">
      <div class="content__offers" v-for="offers in info.filteredOffer"> ......... </div>
</code>

и ничего не выводится, ошибок нет

[Сергей Соколов]

ну вот работающий фиддл
Ошибка, например, в том, что vacancyName находится не в item, а глубже, в item.fieldTypes

[sertu]

Сергей Соколов, спасибо огромное