如何在Vue的methods中调用setup()内的onRequest函数？

你已经在setup()中定义并导出了onRequest函数，要在methods的deleteBranch方法完成删除操作后调用它刷新表格，只需在删除请求成功的回调里添加this.onRequest()调用即可，具体修改如下：

修改后的完整代码 #

export default {
  setup() {
      function onRequest(props) {
          // 此处为表格数据请求逻辑
      }

      onMounted(() => {
          onRequest({
              pagination: pagination.value,
              filter: undefined,
          })
      })

      return {
          onRequest
      }
  },

  methods: {
      deleteBranch(branch_id) {
          this.$q.dialog({
              title: 'Confirm',
              message: 'Would you like to Delete Branch#' + branch_id + '?',
              cancel: true,
              persistent: true
          }).onOk(() => {
              this.$axios.delete('https://api.bdshsystem.com/api/v1/branch/' + 
              branch_id).then(response => {
                  this.$q.notify({
                      type: 'positive',
                      timeout: 500,
                      position: 'top',
                      message: 'Branch Deleted Successfully !'
                  })
                  // 调用onRequest刷新表格，参数与onMounted中保持一致
                  this.onRequest({
                      pagination: this.pagination, // 若pagination是setup中声明的ref变量，需根据实际情况调整为this.pagination.value
                      filter: undefined,
                  })
              }).catch((error) => {
                  this.$q.notify({
                      type: 'negative',
                      position: 'top',
                      timeout: 500,
                      message: 'Form submission Failed !'
                  })
              })
          }).onOk(() => {
          // console.log('>>>> second OK catcher')
          }).onCancel(() => {
          // console.log('>>>> Cancel')
          }).onDismiss(() => {
          // console.log('I am triggered on both OK and Cancel')
          })
      },
  },
}

注意事项 #

• 如果pagination是setup中用ref声明的变量，且未通过setup的return导出，建议将其导出后再在methods中访问；或者直接把deleteBranch方法移到setup内，使用Composition API的写法会更统一。

内容的提问来源于stack exchange，提问作者Azim