No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Is there proper way to set default values to component props?

    Help
    2
    6
    844
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      Fragster last edited by

      e.g. I want to set default no-caps for all q-btn, q-tabs (and everywhere), i can use dirty hack with global mixin in boot file:

      export default function ({ Vue }) {
        const strategies = Vue.config.optionMergeStrategies
        strategies.props = function (parent, child) {
          const result = { ...parent, ...child }
          if (parent?.noCaps) {
            result.noCaps = parent.noCaps
          }
          return result
        }
        Vue.mixin({
          props: {
            noCaps: {
              type: Boolean, default: true
            }
          }
        })
        // strategies.props = strategies.methods
      }
      
      

      but what if I want to set all my q-input and q-field “square filled” without interference with q-card?

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @Fragster last edited by

        @Fragster

        what do you mean with ‘without interference with q-card’?

        1 Reply Last reply Reply Quote 0
        • F
          Fragster last edited by Fragster

          My fault! interference with other components with same props. E.g. fab has ‘square’ prop, but i want to set default only for q-filed and q-input. Or no-caps only for buttons, not for q-tabs. Is there some way to configure default values for props for definite component?
          (sorry for bad english 😞 )

          dobbel 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @Fragster last edited by dobbel

            @Fragster

            Instead of using a global mixin you can use extends to extend an existing quasar component. With extends you can set default props without messing with other components.

            <script>
            import QInput from 'quasar'
            export default {
              name: 'MyInput',
              extends: QInput
              props: {
                outlined: {
                  type: Boolean,
                  default: true
                },
                dense: {
                  type: Boolean,
                  default: true
                }
              }
             }
            </script>
            

            It’s from this thread:
            https://forum.quasar-framework.org/topic/5950/configure-component-prop-defaults/4

            1 Reply Last reply Reply Quote 1
            • F
              Fragster last edited by

              I was thinking about this, but in this case, the auto-import feature is lost, so i need import component globally, or in every place.
              Also I need use my names for components. And I finally - lost Vetur autocompletion in templates 😞

              dobbel 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @Fragster last edited by

                @Fragster

                I understand. I found this article about how the composition api is replacing mixins in vue3 ( or with a package in vue2). Maybe you find a better solution there:

                https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post