I am attempting to put two conditions into one div, but since I am new to coding, I am not sure where to go from here. Basically what my code is doing is displaying a part table constantly, but I only want to display the table when there are results found. When the no results div displays, I would like the table to not display. If any advice could be spared, it would be greatly appreciated. Here is the code....

  <keep-alive>
      <PartsTable style="grid-area: contentArea" v-if="displayStore.cardView" />
    </keep-alive>

    <div id="noResultsDiv" v-if="partStore.filterQuery && !computedList.length">No Results Found</div>

script

<script lang="ts">
import { defineComponent } from "vue";
import { mapStores } from 'pinia'
import PartsTable from "../components/PartsTable.vue";
import ActionButton from "../components/ActionButton.vue";
import PartCardHolder from "../components/PartCardHolder.vue";
import { useDisplayStore } from "../stores/display-store";
import { usePartStore } from "../stores/part-store";
import { PartDefinition } from "../types/PartDefinition";

export default defineComponent({
  name: "Home",
  components: {
    PartsTable,
    ActionButton,
    PartCardHolder,
  },
  data() {
    return {
      pageCount: 50 as number,
      emptyStore: false as boolean
    }
  },
  computed: {
    ...mapStores(useDisplayStore, usePartStore),
    computedList(): PartDefinition[] {
      return this.partStore.filteredList.slice(0, this.pageCount);
    },
  },
  methods: {
    addPart(): void {
      this.$router.push({
        path: `/add`,
      });
    },
    viewPart(id: PartDefinition["id"]): void {
      this.$router.push({
        path: `/view/${id}`,
      });
    },
    async updateStorage() {
      sessionStorage.setItem("cardView", this.displayStore.cardView.toString())
    },
  },
  async mounted() {
    if (sessionStorage.getItem("cardView") == "true") {
      this.displayStore.cardView = true
      sessionStorage.setItem("cardView", "true")
    } else {
      this.displayStore.cardView = false
      sessionStorage.setItem("cardView", "false")
    }
    console.log(sessionStorage.getItem("cardView"))
  },
  unmounted() {
    this.partStore.filterQuery = ""
  },
});

</script>

CodePudding user response：

You can use vue.js Conditional Rendering v-if/v-else to achieve.

<div v-if="computedList.length">
  // Your parts table will come here.
</div>
<div v-else>
  // No results div will display here
</div>

I just gave you a way to achieve the requirement. You can modify the condition as per your need.