在 vue.js 文件中调用 v-if 方法答案

【问题标题】：Call a method on v-if inside vue.js file在 vue.js 文件中调用 v-if 方法
【发布时间】：2022-10-23 15:11:17
【问题描述】：

我对 vue.js 很陌生。我有一个小问题要解决，需要帮助。

所以我有一个 vue.js 文件，它有一个现有的方法，比如说，

doSomething(){
   //updates few properties here
}

现在我有一个列表/数组计算的财产让我们说页面用户（），并且我想在pageUser.length == 0 时调用doSomething。

我们如何实现这一目标Vue.js，我们是否可以在任何标签中使用 v-if 并从那里调用该方法，或者有什么其他方法可以做到这一点。

【问题讨论】：

似乎您可以尝试为 pageUser 数组添加手表，但这可能不是最好的解决方案。

标签： javascript typescript vue.js vuejs2 vue-component

【解决方案1】：

您可以在计算属性中触发您的方法：

const app = Vue.createApp({
  data() {
    return {
      user: [{id: 1}, {id: 2}],
    };
  },
  computed: {
    pageUser() {
      if (this.user.length) return this.user 
      this.doSomething()
      return 'no user'
    }
  },
  methods: {
    doSomething() {
      console.log('done something')
    },
    empty() {
      this.user = []
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="empty">empty</button>
  <div>{{ pageUser }}</div>
</div>

【讨论】：

嗨@Nikola，对不起，我的问题不清楚，pageUser 不是从 data() 返回的东西，pageUser() 是计算的一部分：{}
@Sourabh 嘿，伙计，请再次检查，请我更新我的答案。只需返回正确的值或在计算属性中触发您的函数