如何将Vue.js中的refs与三元表达式组合?

vc6uscn9  于 2023-03-24  发布在  Vue.js
关注(0)|答案(1)|浏览(172)

考虑下面的代码片段:

const salesFilter = computed(() => {
  return Object.values(dataset.value).filter((item) => item.category==="Sales")
})
const salesTotalTwo = ref((salesFilter.value.length == 0) ? []:salesFilter.value[0].values)

当应用程序被挂载时,dataset是空的,所以salesFilter也返回空。在这种情况下,我希望salesTotalTwo返回一个空列表,但我希望它在dataset开始包含一些信息的时候被更新。当我运行测试时,我可以看到salesFilter的行为与预期的一样,但是由于某种原因,salesTotalTwo一直引用一个空列表。我把ref和三元表达式结合在一起的方法是错误的吗?有没有更聪明的方法来做到这一点?

nlejzf6q

nlejzf6q1#

发生这种情况是因为salesTwo属性不是React性的。您需要使用计算属性来创建它。
这里有一个演示-

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>

相关问题