Using ternary expression along v-if statement is giving errors in Vue JS

Question

Code :-

<template>
  <div id="calendars-results">
    <div class="vs-con-loading__container">
      <div class="vs-row flex justify-between">
        <h4 class="vs-row mb-2">{{ title }}</h4>
        <!-- Date Picker to change date -->
        <date-picker
          v-if="date"
          class="vs-row"
          v-model="date"
          type="date"
          placeholder="Select Date"
          valueType="format"
          format="YYYY-MM-DD"
          @change="changeDate"
        ></date-picker>
      </div>
      <div v-if="total >= data_array.length" class="results-count mt-4">
        Showing {{ data_array.length }} of {{ total }} Results
      </div>

      <!-- Table with Data -->
      <div
        v-if="data_array.length > 0"
        class="earning-calendar overflow-x-scroll"
        
        // If I remove the line below, the code works fine
        :class = "[ title === "Earnings Calendar" && reduceButton === false ? "earning-calendar" : '']"
      >
        <div>SideBar docked = {{ !reduceButton }}</div>
        <!-- Table with Data -->

        <ticker-table
          v-if="data_array.length > 0"
          :stocks_clickable="stocks_clickable"
          :data_array="data_array"
          :data_headers="data_headers"
          :sort_col_index="sort_col_index"
        ></ticker-table>
      </div>
      <h5 v-else-if="!loading" class="py-8 text-primary text-center">
        <vs-icon
          class="text-xl pr-2"
          icon="icon-info"
          icon-pack="feather"
        ></vs-icon>
        <span>{{ no_results_msg }}</span>
      </h5>
    </div>
    <div v-if="load_more_button" class="text-center">
      <vs-button class="mt-6" @click="showMore">{{ show_more_text }}</vs-button>
    </div>
    <div
      v-else-if="data_array.length > 0 && data_array.length > 20"
      class="text-center"
    >
      <vs-button class="mt-6" @click="showLess">Show Less</vs-button>
    </div>
  </div>
</template>

<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
import TickerTable from "@/components/shared/tables/ThTickerTable.vue";

export default {
  name: "IPOEarnings",
  components: {
    DatePicker,
    TickerTable
  },
  data() {
    return {
      sort_index: this.sort_col_index,
      date: null,
      loading: false
    };
  },
  props: {
    title: {
      type: String,
      required: true
    },
    no_results_msg: {
      type: String,
      required: true
    },
    default_date: {
      type: String
    },
    data_array: {
      type: Array,
      required: true
    },
    data_headers: {
      type: Array,
      required: true
    },
    sort_col_index: {
      type: Number,
      required: true
    },
    stocks_clickable: {
      type: Boolean,
      default: false
    },
    load_more_button: {
      type: Boolean,
      default: false
    },
    show_more_text: {
      type: String,
      default: ""
    },
    total: {
      type: Number,
      default: 0
    }
  },
  watch: {
    data_array(oldVal, newVal) {
      this.loading = false;
      this.$vs.loading.close("#calendars-results > .con-vs-loading");
    }
  },
  methods: {
    changeDate(currentValue) {
      this.loading = true;
      this.$vs.loading({ container: "#calendars-results", scale: 0.6 });
      this.date = currentValue;
      // harcoded max 200 limit to get results
      this.$emit("update", currentValue, 200);
    },
    showMore() {
      this.$emit("showMore");
    },
    showLess() {
      this.$emit("showLess");
    }
  },
  created() {
    this.loading = true;
    this.date = this.default_date;
  },

  computed: {
    reduceButton: {
      get() {
        return this.$store.state.reduceButton;
      },
      set(val) {
        this.$store.commit("TOGGLE_REDUCE_BUTTON", val);
      }
    }
  }
};
</script>

<style lang="scss">
@media (min-width: 1015px) {
  .earning-calendar {
    overflow: hidden !important;
  }
}
</style>

Errors

(Emitted value instead of an instance of Error)

  Errors compiling template:

  v-else-if="!loading" used on element <h5> without corresponding v-if.

  37 |        ></ticker-table>
  38 |      </div>
  39 |      <h5 v-else-if="!loading" class="py-8 text-primary text-center">
     |          ^^^^^^^^^^^^^^^^^^^^
  40 |        <vs-icon
  41 |          class="text-xl pr-2"

  Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

  46 |      </h5>
  47 |    </div>
  48 |    <div v-if="load_more_button" class="text-center">
     |    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  49 |      <vs-button class="mt-6" @click="showMore">{{ show_more_text }}</vs-button>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  50 |    </div>
     |  ^^^^^^^^
  51 |    <div
     |  ^^^^^^
  52 |      v-else-if="data_array.length > 0 && data_array.length > 20"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  53 |      class="text-center"
     |  ^^^^^^^^^^^^^^^^^^^^^^^
  54 |    >
     |  ^^^
  55 |      <vs-button class="mt-6" @click="showLess">Show Less</vs-button>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  56 |    </div>
     |  ^^^^^^^^
  57 |  </div>
     |  ^^^^^^

If I remove the line where I'm performing the ternary operation :class = "[ title === "Earnings Calendar" && reduceButton === false ? "earning-calendar" : '']" then the code works fine. Why is the ternary operator in :class and v-if are not working together ? Is there a way that I can use them together. I tried to change v-if with v-else but still, the errors don't get resolved. But if I remove the ternary line, the errors go away. What exactly is causing the errors here ?

Use { instead [ when bind class

Vasile Radeanu
– Vasile Radeanu

2021-09-01 10:48:37 +00:00
Commented Sep 1, 2021 at 10:48 — Vasile Radeanu
– Vasile Radeanu, Commented Sep 1, 2021 at 10:48
I did that but the errors remain.

Abdullah Ch
– Abdullah Ch

2021-09-01 10:53:53 +00:00
Commented Sep 1, 2021 at 10:53 — Abdullah Ch
– Abdullah Ch, Commented Sep 1, 2021 at 10:53

Vasile Radeanu · Accepted Answer · 2021-09-01 10:58:21Z

2

Change to this

:class="{ 'earning-calendar' : title === 'Earnings Calendar' && reduceButton === false }"

answered Sep 1, 2021 at 10:58

Vasile Radeanu

8946 silver badges19 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 00:54:09Z

The problem is the quote matching fails due to the nested double-quotes inside the double-quoted attribute value of the class binding:

       👇 outer
:class="[
  title === "Earnings Calendar" && reduceButton === false ? "earning-calendar" : ''
]"          👆 inner          👆 inner                       👆 inner         👆 inner
 👆 outer

A quick fix is to change the inner quotes to single-quotes:

:class="[
  title === 'Earnings Calendar' && reduceButton === false ? 'earning-calendar' : ''
]"

Also be aware that you're applying earning-calendar class twice (once statically, and then again in the class binding):

class="earning-calendar overflow-x-scroll"
       ^^^^^^^^^^^^^^^^
:class="[
  title === 'Earnings Calendar' && reduceButton === false ? 'earning-calendar' : ''
]"                                                           ^^^^^^^^^^^^^^^^

You should probably remove the static class name, or update the dynamic one.

demo

But a more succinct/readable solution is to use the object syntax of class bindings, as shown in the other answer here.

Collectives™ on Stack Overflow

Using ternary expression along v-if statement is giving errors in Vue JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related