[Vuejs]-How do I combine refs in Vue.js with a ternary expression?

by

0👍

✅

It’s happening because salesTwo property is not reactive. You need to make it using a computed property.

Here is a demo-

const { createApp, ref, computed } = Vue

const app = createApp({
  setup() {
    const dataset = ref([]);
    const salesFilter = computed(() => {
      return Object.values(dataset.value).filter((item) => item.category === "Sales")
    })
    const salesTotalTwo = computed(() => {
      return salesFilter.value.length == 0 ? [] : salesFilter.value[0]
    })
    const setDataset = () => {
      dataset.value.push({
        category: "Sales"
      })
    }
    return {
      dataset,
      salesFilter,
      salesTotalTwo,
      setDataset
    }
  }
}).mount('#app')
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  salesTotalTwo - {{ salesTotalTwo }} <br>
  <button @click="setDataset">Set dataset</button>
</div>

Leave a comment