Issue with filtering array value from different array in Vuejs?

Question

I have if/else condition in List.vue component, Where it always falling under condition of else. not sure why ?

HelloWorld.vue :

<template>
  <div>
    <div v-for="box in boxes" :key="box.SName">
      <BaseAccordian>
        <template v-slot:title>{{ box.SName }}</template>
        <template v-slot:content>
          <div v-for="paint in paints" :key="paint.TName">
            {{ paint.TName }}
          </div>
          <List
            :content="matchingdata"
            :SName="box.SName"
          />
        </template>
      </BaseAccordian>
    </div>
  </div>
</template> 

<script>
import { tab } from "./tab";
import { tabb } from "./tabb";
import { tabsandcontent } from "./tabsandcontent";
import BaseAccordian from "./BaseAccordian.vue";
import List from "./List.vue";
export default {
  name: "HelloWorld",
  components: {
    BaseAccordian,
    List,
  },
  data() {
    return {
      boxes: [],
      paints: [],
      matchingdata: [],
    };
  },
  mounted() {
    tab().then((r) => {
      this.boxes = r.data;
    });
    tabb().then((r) => {
      this.paints = r.data;
    });
    tabsandcontent().then((r) => {
      this.matchingData = r.data;
    });
  },
};
</script>

List.vue :

<template>
  <div>
    <div v-if="matchingData.length > 0" class="line">
      <div
        v-for="match in matchingData"
        :key="match.PD"
        :class="{
          green: match.OverallStatus === 'healthy',
          red: match.OverallStatus === 'down',
        }"
      >
        {{ match.OverallStatus }}
      </div>
    </div>
    <div v-else><p>No matching data</p></div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    content: {
      type: Array,
      required: true,
    },
    SourceDatabaseName: {
      type: String,
      required: true,
    },
  },
  data: function () {
    return {};
  },
  methods: {},
  computed: {
    matchingData() {
      return this.content.filter((a) => a.SName === this.SName);
    },
  },
};
</script>

Functionality which I am trying to achieve :

I have three arrays like matchingdata, boxes and paints and I have common array name called SName exists in matchingdata and boxes arrays.

@tryzord I noticed you removed the axios request from the codesandbox (and removed codesandbox too). If you removed that because request was failing, then, FYI, it works after allowing "Insecure Content" from site-settings. — Avinash Thakur
– Avinash Thakur, Commented Mar 9, 2022 at 11:21

kissu · Accepted Answer · 2022-03-10 09:24:23Z

You have a typo in HelloWorld.vue.

Replace both instances of matchingdata by matchingData and it will work.

Here's the final file.

<template>
  <div>
    <div v-for="box in boxes" :key="box.SourceDatabaseName">
      <BaseAccordian>
        <template v-slot:title>{{ box.SourceDatabaseName }}</template>
        <template v-slot:content>
          <div v-for="paint in paints" :key="paint.TargetDatabaseName">
            {{ paint.TargetDatabaseName }}
          </div>
          <List
            :content="matchingData"
            :SourceDatabaseName="box.SourceDatabaseName"
          />
        </template>
      </BaseAccordian>
    </div>
  </div>
</template> 

<script>
import { tab } from "./tab";
import { tabb } from "./tabb";
import { tabsandcontent } from "./tabsandcontent";
import BaseAccordian from "./BaseAccordian.vue";
import List from "./List.vue";
export default {
  name: "HelloWorld",
  components: {
    BaseAccordian,
    List,
  },
  data() {
    return {
      boxes: [],
      paints: [],
      matchingData: [],
    };
  },
  mounted() {
    tab().then((r) => {
      this.boxes = r.data;
    });
    tabb().then((r) => {
      this.paints = r.data;
    });
    tabsandcontent().then((r) => {
      this.matchingData = r.data;
    });
  },
};
</script>

Collectives™ on Stack Overflow

Issue with filtering array value from different array in Vuejs?

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