How to use the @vue/composition-api.toRefs function in @vue/composition-api

To help you get started, we’ve selected a few @vue/composition-api examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github logaretm / vue-use-form / src / useField.ts View on Github external
export function useFlags() {
  const flags: ValidationFlags = reactive(createFlags());
  const passed = computed(() => {
    return flags.valid && flags.validated;
  });

  const failed = computed(() => {
    return flags.invalid && flags.validated;
  });

  return {
    ...toRefs(flags),
    passed,
    failed
  };
}
github LinusBorg / composition-api-demos / src / composables / use-endpoint.js View on Github external
}).json()
    )
    try {
      _loading.value = true
      state.result = await state.promise
    } catch (e) {
      state.error = e
    } finally {
      _loading.value = false
    }
  }

  return {
    call,
    cancelPrevious,
    ...toRefs(state),
  }
}
github PECE-project / drupal-pece / src / front / pages / Collaborate.vue View on Github external
setup () {
    const state = reactive({
      term: ''
    })

    return {
      ...toRefs(state),
      simpleCardData
    }
  }
}
github PECE-project / drupal-pece / src / front / components / DarkTheme.vue View on Github external
onMounted(() => {
      state.darkTheme = window.getComputedStyle(document.documentElement).getPropertyValue('content') === 'dark' ||
        !!localStorage.getItem('darkTheme') ||
        false
    })

    function toggleDarkTheme () {
      state.darkTheme = !state.darkTheme
      if (state.darkTheme) {
        return localStorage.setItem('darkTheme', 'on')
      }
      localStorage.removeItem('darkTheme')
    }

    return {
      ...toRefs(state),
      toggleDarkTheme
    }
  }
}
github PECE-project / drupal-pece / src / front / components / ListFilter.vue View on Github external
setup (_, { emit }) {
    const state = reactive({
      filter: []
    })

    return {
      ...toRefs(state)
    }
  }
}
github PECE-project / drupal-pece / src / front / pages / Discover.vue View on Github external
setup () {
    const state = reactive({
      term: '',
      filters: []
    })

    function setFilter (item) {
      state.filters = [...state.filters, item]
    }

    return {
      ...toRefs(state),
      filterItems,
      setFilter,
      discoverData
    }
  }
}
github metaspace2020 / metaspace / metaspace / webapp / src / modules / Datasets / list / DownloadDialog.tsx View on Github external
setup(props, { emit }) {
    const { datasetId } = toRefs(props)
    const {
      result: downloadLinkResult,
      loading,
    } = useQuery(getDatasetDownloadLink, { datasetId }, { fetchPolicy: 'no-cache' })
    const downloadLinks = computed(() => downloadLinkResult.value != null
      ? safeJsonParse(downloadLinkResult.value.dataset.downloadLinkJson)
      : null)

    return () => {
      let content
      if (loading.value) {
        content = <div class="h-64">
      } else if (downloadLinks.value == null) {
        content = <div><h1>Error</h1><p>This dataset cannot be downloaded.</p></div>
      } else {
        const { license, contributors, files } = downloadLinks.value</div>
github PECE-project / drupal-pece / src / front / components / Highlights.vue View on Github external
function navBetweenTabsByKeyBoard (e, index) {
      const i = {
        ArrowRight: index + 1,
        ArrowLeft: index - 1,
        Home: 0,
        End: state.highlights.length - 1
      }
      if (state.highlights[i[e.key]]) {
        state.highlight = { ...state.highlights[i[e.key]] }
        refs.highlightItem[i[e.key]].focus()
      }
    }

    return {
      ...toRefs(state),
      setChosenHighlight,
      navBetweenTabsByKeyBoard
    }
  }
}