question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prop value inconsistent in dev preview and after build in build preview

See original GitHub issue

Describe the bug A clear and concise description of what the bug is. Prop value is inconsistent in dev preview and prod build in latest release. Was working perfectly fine in previous release.

/// EBtn.vue
<script setup lang="ts">
withDefaults(
  defineProps<{
    label?: string;
    unelevated?: boolean;
    noCaps?: boolean;
    outline?: boolean;
    rounded?: boolean;
    icon?: string;
    color?: string;
    round?: boolean;
    size?: string;
    stretch?: boolean;
    type?: 'a' | 'submit' | 'button' | 'reset';
    padding?: string;
    to?: string;
    disable?: boolean;
    dense?: boolean;
  }>(),
  {
    unelevated: true,
  }
);

defineEmits<{ (e: 'click'): void }>();
</script>

<template>
  <q-btn
    v-bind="{ ...$props, color: disable ? 'light-grey' : color }"
    @click="$emit('click')"
    :padding="padding || (round || dense ? undefined : `8px 16px 8px ${!!icon ? '8px' : '16px'}`)"
  >
    <slot />
  </q-btn>
</template>

In the above component, the padding prop value should be undefined when

  • no padding prop is passed
  • round prop is true

This works as expected in dev preview, but after building, the value changes to 8px 16px 8px 16px when the above props are passed

Codepen/jsFiddle/Codesandbox (required) Fork a Codepen (https://codepen.quasar.dev) or a jsFiddle (https://jsfiddle.quasar.dev) or a Codesandbox (https://codesandbox.quasar.dev) and hit save then copy-paste link here.

To Reproduce Steps to reproduce the behavior:

  1. copy the above component
  2. Use it this way
        <e-btn
          size="xs"
          round
          icon="mdi-bell"
          color="grey"
          unelevated
          class="q-ml-sm"
        />
  1. run the dev server and inspect the element
  2. the element has proper padding
  3. see the padding value image image as you can see the padding is undefined
  4. build the project
  5. serve it quasar serve
  6. inspect the element
  7. the button has different padding
    image image

Expected behavior A clear and concise description of what you expected to happen.

  • The padding prop should be undefined

Screenshots If applicable, add screenshots to help explain your problem.

Platform (please complete the following information): Quasar Version: 2.1.1 @quasar/app Version: 3.1.3

Quasar mode:

  • SPA
  • SSR
  • PWA
  • Electron
  • Cordova
  • Capacitor
  • BEX

Tested on:

  • SPA
  • SSR
  • PWA
  • Electron
  • Cordova
  • Capacitor
  • BEX

OS: Linux ubuntu Node: LTS NPM: NA Yarn: 1.x Browsers: Chrome, Edge, Safari iOS:NA Android:NA Electron: NA

Additional context Add any other context about the problem here.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:14 (13 by maintainers)

github_iconTop GitHub Comments

1reaction
rstoenescucommented, Nov 17, 2021

@soulsam480 Vue has been upgraded to v3.2.22 in “@quasar/app” v3.2.3

1reaction
rstoenescucommented, Oct 16, 2021

Thanks for the follow-up. Since it’s a confirmed external issue, let’s close this ticket.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prop value inconsistent in dev and after build · Issue #4808 · vuejs ...
Prop value inconsistent in dev and after build #4808 ... Run vite build and then vite preview; again inspect the button; padding windiCSS...
Read more >
console.log reporting inconsistent values - Stack Overflow
Notably, console.log(angles[0]) reports the erroneous numbers in the expanded result, but the preview displays the correct values.
Read more >
CSSStyleDeclaration - inconsistent values for 'content' property
I'm building CSS file based on the output from getComputedStyles. I believe that 'content' property value returned by CSSStyleDeclaration is inconsistent:
Read more >
Solved: Inconsistent behaviour between Edit and Play mode
I'm finding inconsistent behavior when I am in the PowerApps Studio editing the application vs when I am in Play mode.
Read more >
What's New In DevTools (Chrome 102)
Developer advocate working on Chrome DevTools at Google. Table of contents. Preview ... Preview feature: New Performance insights panel.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found