Цикл Vuex массив объектов и создание условного оператора для ключа: значение

Question

Я пытаюсь получить данные через VueX и перебрать массив объектов, чтобы получить код menu_code.Я успешно получаю нужные мне данные, но мне нужно показать / скрыть кнопку в соответствии со следующими условиями:

, если ВСЕ данные в menu_code имеют значение NULL, кнопка не отображается.если один или несколько данных menu_code имеют значение! == NULL, покажите кнопку.

не уверены, правильно ли я связываю данные hasCode с кнопкой.

// MenuPage.vue
<button v-show="hasMenuCode">hide me if no menu code</button>

<script lang="ts">
  import {
    Vue,
    Component,
    Watch,
    Prop
  } from 'vue-property-decorator';
  import {
    namespace
  } from 'vuex-class';
  import MenuItem from "../../models/menu/MenuItem";

  export default class MenuPage extends Vue {
    @namespace('menu').State('items') items!: MenuItem[];

    hasCode = true;

    hasMenuCode() {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].menu_code !== null) {
          this.hasCode = true;
        } else {
          this.hasCode = false;
        }
      }
    }
  }
</script>


// MenuItem.ts
import AbstractModel from "../AbstractModel";
import Image from '../common/Image';
import MenuRelationship from "./common/MenuRelationship";
import Availability from "../common/Availability";
import Pricing from "../common/Pricing";

interface MenuItemMessages {
    product_unavailable_message: string;
}

interface ItemOrderSettings {
    min_qty: number;
    max_qty: number;
}

export default class MenuItem extends AbstractModel {
    name: string;
    menu_code: string;
    description: string;
    image: Image;
    has_user_restrictions: boolean;
    availability: Availability;
    pricing: Pricing;
    ordering: ItemOrderSettings;
    messages: MenuItemMessages;
    prompts: MenuRelationship[];
    setMenus: MenuRelationship[];

    constructor(props: any) {
        super(props);

        this.name = props.name;
        this.menu_code = props.menu_code;
        this.description = props.description;
        this.image = props.image;
        this.has_user_restrictions = props.has_user_restrictions;
        this.availability = new Availability(props.availability);
        this.pricing = new Pricing(props.pricing);
        this.ordering = props.ordering;
        this.messages = props.messages;
        this.prompts = props.prompts;
        this.setMenus = props.setMenus;
    }
}

Answer 1

Основываясь на ваших требованиях, вам необходимо вернуть, если есть какой-либо элемент, имеющий menu_code, в противном случае цикл продолжается, и он принимает только значение последнего элемента в this.items

hasMenuCode() {
  for (let i = 0; i < this.items.length; i++) {
    if (this.items[i].menu_code !== null) {
      this.hasCode = true;
      return
    } else {
      this.hasCode = false;
    }
  }
}

Корочереализация

hasMenuCode() {
  return this.items.some(item => item.menu_code !== null)
}