How to use the computed function from vue

Find comprehensive JavaScript vue.computed code examples handpicked from public code repositorys.

4
5
6
7
8
9
10
11
12
13
components: {
  QRCanvas,
},
setup() {
  const text = ref('hello, world');
  const options = computed(() => ({
    resize: false,
    data: text.value,
  }));
  return {
fork icon9
star icon70
watch icon5

142
143
144
145
146
147
148
149
150
151
const isFocus = vue.ref(false);
const focusable = vue.ref(true);
const navScroll$ = vue.ref(null);
const nav$ = vue.ref(null);
const el$ = vue.ref(null);
const sizeName = vue.computed(() => {
  return ['top', 'bottom'].includes(rootTabs.props.tabPosition) ? 'width' : 'height';
});
const navStyle = vue.computed(() => {
  const dir = sizeName.value === 'width' ? 'X' : 'Y';
fork icon3
star icon8
watch icon3

+ 7 other calls in file

232
233
234
235
236
237
238
239
240
241
this.hasAllItems = vue.computed(() => {
    const state = this.state;
    const nbItems = state.totalFilteredOptions + state.groups.size;
    return this.state.filteredOptions.length >= nbItems;
});
this.hasFetchedAllItems = vue.computed(() => {
    const isPartial = vue.unref(this.isPartial);
    if (!isPartial) {
        return true;
    }
fork icon1
star icon7
watch icon6

+ 161 other calls in file

67
68
69
70
71
72
73
74
75
76
    }
});
const currentLabel = vue.computed(() => {
    return props.label || (isObject.value ? '' : props.value);
});
const currentValue = vue.computed(() => {
    return props.value || props.label || '';
});
const isDisabled = vue.computed(() => {
    return props.disabled || states.groupDisabled || limitReached.value;
fork icon1
star icon2
watch icon1

+ 15 other calls in file

46
47
48
49
50
51
52
53
54
55
const tooltip = vue.ref(null);
const tooltipVisible = vue.ref(false);
const enableFormat = vue.computed(() => {
    return formatTooltip.value instanceof Function;
});
const formatValue = vue.computed(() => {
    return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue;
});
const displayTooltip = debounce__default['default'](() => {
    showTooltip.value && (tooltipVisible.value = true);
fork icon1
star icon2
watch icon1

+ 7 other calls in file

34
35
36
37
38
39
40
41
42
43
setup(props, ctx) {
    const el = vue.ref(null);
    const container = vue.ref(null);
    const visible = vue.ref(false);
    const styleBottom = vue.computed(() => `${props.bottom}px`);
    const styleRight = vue.computed(() => `${props.right}px`);
    const scrollToTop = () => {
        const beginTime = Date.now();
        const beginValue = el.value.scrollTop;
        const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
fork icon1
star icon2
watch icon1

+ 3 other calls in file

36
37
38
39
40
41
42
43
44
45
    }, { immediate: true });
});
vue.onBeforeUnmount(() => {
    parent.steps.value = parent.steps.value.filter(instance => instance.uid !== currentInstance.uid);
});
const currentStatus = vue.computed(() => {
    return props.status || internalStatus.value;
});
const prevStatus = vue.computed(() => {
    const prevStep = parent.steps.value[index.value - 1];
fork icon1
star icon2
watch icon1

+ 19 other calls in file

81
82
83
84
85
86
87
88
89
90
    const type = props.type;
    return type && TypeMap[type]
        ? `el-message__icon el-icon-${TypeMap[type]}`
        : '';
});
const customStyle = vue.computed(() => {
    return {
        top: `${props.offset}px`,
        zIndex: props.zIndex,
    };
fork icon1
star icon2
watch icon1

+ 3 other calls in file

33
34
35
36
37
38
39
40
41
42
vue.watch(() => props.poolSize, val => {
    cache.value = Math.floor(val / 3);
}, {
    immediate: true,
});
const renderingItems = vue.computed(() => props.poolSize + 2 * util.$(cache));
const startNode = vue.computed(() => {
    return Math.max(0, Math.floor(util.$(offset) / props.itemSize) - util.$(cache));
});
const viewportStyle = vue.computed(() => {
fork icon1
star icon2
watch icon1

+ 13 other calls in file

148
149
150
151
152
153
154
155
156
157
const validateState = vue.ref('');
const validateMessage = vue.ref('');
const validateDisabled = vue.ref(false);
const computedLabelWidth = vue.ref('');
const vm = vue.getCurrentInstance();
const isNested = vue.computed(() => {
    let parent = vm.parent;
    while (parent && parent.type.name !== 'ElForm') {
        if (parent.type.name === 'ElFormItem') {
            return true;
fork icon1
star icon2
watch icon1

+ 11 other calls in file

36
37
38
39
40
41
42
43
44
45
  success,
  warning,
  info
} = vue.toRefs(props);
return {
  className: vue.computed(() => {
    let className = type.value === "link" ? "px-0 " : "";

    if (success.value) {
      className += "easi-btn-success";
fork icon1
star icon1
watch icon4

124
125
126
127
128
129
130
131
132
133
      path: _route.path,
      breadcrumbName: _route.meta.title
    };
  });
});
const pageTitle = vue.computed(() => {
  return title.value || route.meta.title && route.meta.title;
});
const pageDesc = vue.computed(() => {
  return desc.value || route.meta.desc && route.meta.desc;
fork icon1
star icon1
watch icon4

+ 5 other calls in file

252
253
254
255
256
257
258
259
260
261
const isMobile = vue.ref(false);
const runTextValue = vue.ref('');
const stylesheetId = 'v-code-block--theme';
const useTheme = vue.ref('');
// -------------------------------------------------- Computed //
const codeBlockClasses = vue.computed(() => {
    return isMobile.value ? 'v-code-block--mobile' : '';
});
const codeTagStyles = vue.computed(() => {
    const width = useTheme.value === 'coy' ? '100%' : '';
fork icon0
star icon1
watch icon1

+ 9 other calls in file

136
137
138
139
140
141
142
143
144
145
forEachValue(wrappedGetters, function (fn, key) {
  // use computed to leverage its lazy-caching mechanism
  // direct inline function use will lead to closure preserving oldState.
  // using partial to return function with only arguments preserved in closure environment.
  computedObj[key] = partial(fn, store);
  computedCache[key] = vue.computed(function () { return computedObj[key](); });
  Object.defineProperty(store.getters, key, {
    get: function () { return computedCache[key].value; },
    enumerable: true // for local getters
  });
fork icon0
star icon0
watch icon1

+ 21 other calls in file

2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
// TODO: we could allow currentRoute as a prop to expose `isActive` and
// `isExactActive` behavior should go through an RFC
function useLink(props) {
    const router = vue.inject(routerKey);
    const currentRoute = vue.inject(routeLocationKey);
    const route = vue.computed(() => router.resolve(vue.unref(props.to)));
    const activeRecordIndex = vue.computed(() => {
        const { matched } = route.value;
        const { length } = matched;
        const routeMatched = matched[length - 1];
fork icon0
star icon0
watch icon1

+ 107 other calls in file

189
190
191
192
193
194
195
196
197
198
}

var router = useRouter()
var currentRoute = useRoute()

var resolvedRoute = vue.computed(function () { return router.resolve(vue.unref(props.to), currentRoute) })

var activeRecordIndex = vue.computed(function () {
  var route = resolvedRoute.value.route
  var matched = route.matched
fork icon0
star icon0
watch icon1

+ 83 other calls in file

958
959
960
961
962
963
964
965
966
967
if (!instance?.type || !(options.keyName in instance.type)) {
    return;
}
const metaInfo = instance.type[options.keyName];
if (isFunction(metaInfo)) {
    const computedMetaInfo = vue.computed(metaInfo.bind(this));
    useMeta(computedMetaInfo);
}
else {
    useMeta(metaInfo);
fork icon0
star icon0
watch icon1

+ 3 other calls in file

51
52
53
54
55
56
57
58
59
60
setup: function (props, _a) {
    var emit = _a.emit, slots = _a.slots;
    var activeID = vue.inject("BtbVueList-activeEntryID");
    var collapsedSet = vue.reactive(new Set());
    var refList = vue.reactive({});
    var slotList = vue.computed(function () {
        return Object.keys(slots);
    });
    var clickEntry = function (entry) {
        emit("clickEntry", entry);
fork icon0
star icon0
watch icon1

+ 3 other calls in file

2345
2346
2347
2348
2349
2350
2351
2352
2353
2354
const injectedRoute = vue.inject(routerViewLocationKey);
const routeToDisplay = vue.computed(() => props.route || injectedRoute.value);
const injectedDepth = vue.inject(viewDepthKey, 0);
// The depth changes based on empty components option, which allows passthrough routes e.g. routes with children
// that are used to reuse the `path` property
const depth = vue.computed(() => {
    let initialDepth = vue.unref(injectedDepth);
    const { matched } = routeToDisplay.value;
    let matchedRoute;
    while ((matchedRoute = matched[initialDepth]) &&
fork icon0
star icon0
watch icon0

+ 49 other calls in file

3
4
5
6
7
8
9
10
11
12
const type = require("./type.js");
const _sfc_main = vue.defineComponent({
  name: "vx-button",
  props: type.buttonProps,
  setup(props) {
    const styleClass = vue.computed(() => {
      return {
        [`vx-button--${props.type}`]: props.type,
        "is-plain": props.plain,
        "is-round": props.round,
fork icon0
star icon0
watch icon0

+ 3 other calls in file