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
    1. Home
    2. davewallace
    D
    • Profile
    • Following 0
    • Followers 1
    • Topics 3
    • Posts 11
    • Best 1
    • Groups 0

    davewallace

    @davewallace

    1
    Reputation
    467
    Profile views
    11
    Posts
    1
    Followers
    0
    Following
    Joined Last Online

    davewallace Follow

    Best posts made by davewallace

    • RE: How to regsiter custom components?

      @Dobromir Good point! Ok here goes, and maybe this can serve as a time for some QA on what I’ve done to. Happy for improvement suggestions 🙂

      Problem

      I want to create a custom, re-usable component that follows Vue.js conventions as well as Quasar conventions, where they apply.

      To add context, many online forums, articles & posts at the time of this post’s writing focus on use if the template property within a component definition, which has caused a runtime error unless set up correctly.

      Solution

      Parent component

      <template><!-- use of tag-based templating within this parent component -->
      
        <div><!-- single root node, required -->
          <h1>A Route View</h1>
          <h2>Here is a custom component:</h2>
          <!--
          this component differs from the basic input component provided by
          Vue.js and Quasar in that it will contain a button which can be used to
          auto-populate the input value with the return value of supplied function.
          for this example, i have not implemented the supplied function part.
          -->
          <child-component
            label="My Label"
            componentclasses="floating-label"
            inputclasses="full-width"
          ></child-component>
        </div>
      
      </template>
      
      <script>
      // import our custom component to use within this component
      import ChildComponent from '../ChildComponent'
      
      export default {
      
        name: 'ParentComponent',
      
        // be sure to list our custom component here, i've used kebab-case here as
        // the name to be used in the above <template> definition. ComponentCamelCase
        // is used for the actual component definition
        components: {
          'child-component': ChildComponent
        }
      
      }
      </script>
      

      Child component

      <template><!-- use of tag-based templating within this child component -->
      
        <div :class="componentclasses">
          <input :required="required" :class="inputclasses" v-model="model" :disabled="disable">
          <label v-show="label">{{label}}</label>
          <a @click="generateValue()" class="icon icon-generate"></a>
        </div>
      
      </template>
      <script>
      export default {
        methods: {
      
          /**
          * Given a generator function, this component's inputValue is set
          * to the return value of the generator.
          *
          * @param Function
          **/
          generateValue: function (generator) {
            // set this component's value prop as result of supplied generator function
            return
          }
        },
      
        props: {
          'value': String,
          'required': Boolean,
          'disable': Boolean,
          'label': String,
          'inputclasses': String,
          'componentclasses': String
        },
      
        computed: {
          model: {
            get () {
              return this.value
            },
            set (value) {
              this.$emit('input', value)
            }
          }
        }
      }
      </script>
      
      <style>
      .icon-generate {
        float:right;
        width:16px;
        height:16px;
        border:1px dashed red;
      }
      </style>
      

      Recap

      Counter to tutorials & posts I’ve read through, no template property on ChildComponent is used, instead tag-based templating combined with component names & importing are used.

      My original post asked about installing components in some official way, as with Quasar components via quasar/src/install.js, but nothing was needed.

      Screenshot

      alt text

      Final note

      If anyone can offer suggestions around that ChildComponent being able to accept a per-instance generator function into it’s generateValue method - your help would be much appreciated.

      To illustrate my needs by example, the parent component, when including the child, might want to auto-populate the input field with a name picked randomly from a default set of names. I can’t directly add that logic into the child component because then it only has a single use. I might also want to use that child component again and be able to pass a different function into generateValue which returns a fruit picked randomly from a default set of fruits.

      posted in Help
      D
      davewallace

    Latest posts made by davewallace

    • RE: How to regsiter custom components?

      Looking at the name property again, @rstoenescu - is there any detriment to naming the component? If not, in giving it a name the Vue dev tools uses the name (converting to camelCase) property to populate nodes. My preference would be to supply the name for this reason, unless there’s a good reason to avoid it!

      posted in Help
      D
      davewallace
    • RE: How to regsiter custom components?

      Very clear, thank you @rstoenescu !

      posted in Help
      D
      davewallace
    • RE: How to regsiter custom components?

      @Dobromir Good point! Ok here goes, and maybe this can serve as a time for some QA on what I’ve done to. Happy for improvement suggestions 🙂

      Problem

      I want to create a custom, re-usable component that follows Vue.js conventions as well as Quasar conventions, where they apply.

      To add context, many online forums, articles & posts at the time of this post’s writing focus on use if the template property within a component definition, which has caused a runtime error unless set up correctly.

      Solution

      Parent component

      <template><!-- use of tag-based templating within this parent component -->
      
        <div><!-- single root node, required -->
          <h1>A Route View</h1>
          <h2>Here is a custom component:</h2>
          <!--
          this component differs from the basic input component provided by
          Vue.js and Quasar in that it will contain a button which can be used to
          auto-populate the input value with the return value of supplied function.
          for this example, i have not implemented the supplied function part.
          -->
          <child-component
            label="My Label"
            componentclasses="floating-label"
            inputclasses="full-width"
          ></child-component>
        </div>
      
      </template>
      
      <script>
      // import our custom component to use within this component
      import ChildComponent from '../ChildComponent'
      
      export default {
      
        name: 'ParentComponent',
      
        // be sure to list our custom component here, i've used kebab-case here as
        // the name to be used in the above <template> definition. ComponentCamelCase
        // is used for the actual component definition
        components: {
          'child-component': ChildComponent
        }
      
      }
      </script>
      

      Child component

      <template><!-- use of tag-based templating within this child component -->
      
        <div :class="componentclasses">
          <input :required="required" :class="inputclasses" v-model="model" :disabled="disable">
          <label v-show="label">{{label}}</label>
          <a @click="generateValue()" class="icon icon-generate"></a>
        </div>
      
      </template>
      <script>
      export default {
        methods: {
      
          /**
          * Given a generator function, this component's inputValue is set
          * to the return value of the generator.
          *
          * @param Function
          **/
          generateValue: function (generator) {
            // set this component's value prop as result of supplied generator function
            return
          }
        },
      
        props: {
          'value': String,
          'required': Boolean,
          'disable': Boolean,
          'label': String,
          'inputclasses': String,
          'componentclasses': String
        },
      
        computed: {
          model: {
            get () {
              return this.value
            },
            set (value) {
              this.$emit('input', value)
            }
          }
        }
      }
      </script>
      
      <style>
      .icon-generate {
        float:right;
        width:16px;
        height:16px;
        border:1px dashed red;
      }
      </style>
      

      Recap

      Counter to tutorials & posts I’ve read through, no template property on ChildComponent is used, instead tag-based templating combined with component names & importing are used.

      My original post asked about installing components in some official way, as with Quasar components via quasar/src/install.js, but nothing was needed.

      Screenshot

      alt text

      Final note

      If anyone can offer suggestions around that ChildComponent being able to accept a per-instance generator function into it’s generateValue method - your help would be much appreciated.

      To illustrate my needs by example, the parent component, when including the child, might want to auto-populate the input field with a name picked randomly from a default set of names. I can’t directly add that logic into the child component because then it only has a single use. I might also want to use that child component again and be able to pass a different function into generateValue which returns a fruit picked randomly from a default set of fruits.

      posted in Help
      D
      davewallace
    • RE: How to regsiter custom components?

      Argh, nevermind, I figured it out. I don’t need to register my component, I was referencing it incorrectly within another component that was using it.

      posted in Help
      D
      davewallace
    • How to regsiter custom components?

      I’ve created a custom component, and I’d like to know how to register it, if possible, quasar/src/via install.js if that it the correct way to do it?

      In most of the online tutorials for Vue 2.0 and their own guides, they’re mostly using template: ... but I get errors about runtime mode not allowing that. So I switched to use of the <template /> tag as with all of the Quasar components - but I cannot find a way to register my component official for use.

      Cheers!

      posted in Help
      D
      davewallace
    • How to handle validation with Stepper component?

      Hi,

      In the doc example I can see that there is a toggle which I presume toggles the ready data prop and therefore makes the next step available.

      I have a series of steps similar to this, each with a requirement before the User may proceed. The docs describe all of the parts, but don’t address how this happens - for example there is nothing I could see describing how the toggle worked to unlock the next step.

      I googled for tutorials on using Vue’s stepper, but didn’t come up with much of use, any help on how to work with this - or or if there’s a broader concept I need to understand, that would be most appreciated.

      Cheers!

      posted in Help
      D
      davewallace
    • RE: I can't seem to get routes done correctly [solved]

      @Martin You’ve straightened that out for me, thank you, the stuff I’m working from has been cobbled together from a previously mostly working Vue prototype, turned into a Quasar prototype, doubtless I got a couple of things mixed up and then tried following the wrong thread; sub-routes, which I simply don’t need.

      posted in Help
      D
      davewallace
    • RE: I can't seem to get routes done correctly [solved]

      Another question, but related to this thread, is once I have the suggested setup for sub-routes and my basic navigation loads each given route, where does my original index content live and how does it get loaded? Do I set it as a default? I’m pretty sure I’m approaching that wrongly.

      posted in Help
      D
      davewallace
    • RE: I can't seem to get routes done correctly [solved]

      @Martin No that extra screenshot was useful, thanks 🙂

      posted in Help
      D
      davewallace
    • Possible to use Styl variables with other Pre-processed languages?

      Hi,

      I’ve just included SASS as my pre-processor of choice, and I’d like to be able to use the existing work included via a .styl theme.

      Is this possible?

      posted in Help
      D
      davewallace