using Ternary Operators in HTML tags

Question

so i am using vue.js framework and am tryingto create a list that updates from 2 lsit objects. i want the border of my list cards to chagne depending if a specific thing is true

here are my cards

<li
          v-for="item in limitedItems"
          :key="item.AuftragsNr"
          class="rounded-lg bg-white shadow-lg p-4 pr-10 relative border-l-8 border-t-4"
          :class="
            selectedDashboard === 'germany'
              ? itemsDe.Dringlichkeit
                ? 'border-red-600'
                : 'border-green-500'
              : itemAt.Dringlichkeit
              ? 'border-red-600'
              : 'border-green-500'
          "
        >

here are snippets of the objects in question

  methods: {
    loadTestData() {
      this.itemsDe = [
        {
          AuftragsNr: 1,
          PalettenNr: 101,
          Palettenanzahl: 5,
          Lagerplatz: "A1",
          Dringlichkeit: true,
        },

      this.itemsAt = [
        {
          AuftragsNr: 1,
          PalettenNr: 103,
          Palettenanzahl: 6,
          Lagerplatz: "A2",
          Dringlichkeit: false,
        },

here is my computed if it is of any relevance

  computed: {
    maxHeight() {
      return 0.9 * window.innerHeight;
    },
    items() {
      if (this.selectedDashboard === "germany") {
        return this.itemsDe;
      } else if (this.selectedDashboard === "austria") {
        return this.itemsAt;
      } else {
        return [];
      }
    },
  },

the goal is to make the cards in list change color depending on the value dringlichkeit in the respective lists this has worked previously when we were still only on one list but since i cant get it to change the way i want it to

the combobox is working as i can see it with the other values for excample

        <div class="text-center mx-auto">
          <p class="text-2xl font-bold dark:text-white">Aufträge im Verzug:</p>
          <p class="text-3xl font-bold">
            {{
              selectedDashboard === "germany"
                ? itemsDe.filter((item) => item.Dringlichkeit === true).length
                : itemsAt.filter((item) => item.Dringlichkeit === true).length
            }}
          </p>
        </div>

here i can access the itemsDe and itmsAt bu not in the ternary?

          :ng-class="{
            selectedDashboard === 'germany'?
            itemsDe.filter((item) =>!item.Dringlichkeit === true) ?
            'border-red-600' : 'border-green-500':
            itemsDe.filter((item) =>!item.Dringlichkeit === true)?
            'border-red-600':'border-green-500'
          }"

differing expressions of the same thing but at this point i am just shooting in the dark.

all i am getting is eather unexpected token on the === or missing identifier

Answer 1

When a template expression is wrapped in curly braces, Vue will assume the content is an object:

:ng-class="{
  prop: value
}"

But you put an expression into the object braces, which is invalid syntax. Remove the braces and it should work.

(not sure why you are using :ng-class instead of :class, isn't that Angular?)

Personally, I would not put a ternary expression of that size into the template, but rather use a computed property for that too.

And let me add that !item.Dringlichkeit === true is the same as !item.Dringlichkeit.

Here is a snippet, maybe it helps:

new Vue({
  el: '#app',
  data() {
    return {
      selectedDashboard: 'germany',
      itemsDe: [{Dringlichkeit: true}],
      itemsAt: [{Dringlichkeit: false}],
    };
  },
})

.panel{
  width: 40px;
  height: 40px;
  background: grey;
}

.border-red-600{
  border: 2px solid red;
}

.border-green-500{
  border: 2px solid green;
}

<div id="app">
  <div 
    class="panel" 
    :class="(selectedDashboard === 'germany' ? itemsDe : itemsAt).some(item => !item.Dringlichkeit) ? 'border-green-500' : 'border-red-600'"
  ></div>
<div>
    <label>
      <input type=radio value=austria v-model=selectedDashboard />austria (not dringlich)</label>
    <label><input type=radio value=germany v-model=selectedDashboard />germany (dringlich)</label>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js"></script>