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

vc6uscn9 于 2023-03-24 发布在 Vue.js

关注(0)|答案(1)|浏览(170)

考虑下面的代码片段：

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和三元表达式结合在一起的方法是错误的吗？有没有更聪明的方法来做到这一点？

vue.js

来源：https://stackoverflow.com/questions/75794791/how-do-i-combine-refs-in-vue-js-with-a-ternary-expression

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-03-24

我来回答

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

1条答案

相关问题

热门标签

最新问答