Vuex loop array of objects and create conditional statement for key:value

Question

i'm am attempting to pull in data through VueX and iterate over an array of objects to get the menu_code. I am successfully get the data i need but i need to show/hide a button according to these conditions:

if ALL of the data in menu_code is NULL, don't show the button. if one or more of the menu_code data is !== NULL, show the button.

unsure if i'm linking the hasCode data correctly to the button.

// 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;
    }
}

Is this how Vue looks when used with TypeScript? Doesn't look like Vue to me. Looks like AngularJS :D — Teddy
– Teddy, Commented Nov 27, 2018 at 6:05

ittus · Accepted Answer · 2018-11-27 06:29:46Z

1

Base on your requirement, you need to return if there is any item has menu_code, otherwise the loop continues and it only take the value of the final item in 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;
    }
  }
}

Shorter implementation

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

answered Nov 27, 2018 at 6:29

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuex loop array of objects and create conditional statement for key:value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related