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. minimalicious
    M
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 4
    • Best 1
    • Groups 0

    minimalicious

    @minimalicious

    2
    Reputation
    9
    Profile views
    4
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    minimalicious Follow

    Best posts made by minimalicious

    • RE: [How To] Building components with Quasar

      I tried to follow this guide but I think the quasar API has changed so much that it doesn’t work anymore.

      I managed to make a wrapped q-select that works and might be helpful if you are wrapping quasar (or Vue) components

      I wanted a q-select that would have basic filtering enabled. e.g. It could replace q-select and not have to setup extra code for filtering.

      <ex-select v-model.number="product.supplierId" label="Supplier"
                             :options="supplierListSorted"
                             option-value="supplierId"
                             option-label="companyName"
                             emit-value map-options 
                             filled />
      

      Vue components can use v-bind="$attrs" to bind any attributes that do not match the component params e.g. if you use <ex-select filled … then the filled attribute will be passed down to the component automatically.

      The same applies for v-on="$listeners" where any event handlers will be passed down to the component. v-model binds the input event so this is why it works without any extra code.

      The props “options”, “optionValue” and “optionLabel” are declared because I want to use them in the component code. So if you need to work with an attribute then you need to declare it and add it manually to the wrapped component.

      There is code to work with lists that have a key value and display value e.g. supplierId and supplierName. If optionLabel is set, then filter on that property on the object. Otherwise assume the array just contains string values and filter directly.

      Here is the full ExSelect.vue code

      <template>
        <q-select
          v-bind="$attrs"
          use-input
          fill-input
          hide-selected
          input-debounce="0"
          :options="selectOptions"
          :option-label="optionLabel"
          :option-value="optionValue"
          v-on="$listeners"
          @filter="handleFilter">
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                No results
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </template>
      
      <script>
      export default {
        name: "ExSelect",
        // eslint-disable-next-line
        props: ["options", "optionValue", "optionLabel"], 
        data() {
          return {
            selectOptions: null
          };
        },
        updated() {
          if (!this.selectOptions) {
            console.log("[ExSelect] updated options is ", this.options);
            // keep a copy of the original options list
            this.selectOptions = this.options.slice();
          }
        },
        methods: {
      
          handleFilter(value, doneFunc) {
            console.log("[ExSelect] handleFilter", value);
            if (value === "") {
              doneFunc(() => {
                // reset the list
                console.log("[ExSelect] handleFilter reset list", value);
                this.selectOptions = this.options.slice();
              });
              return;
            }
      
            doneFunc(() => {
              const input = value.toLowerCase();
              console.log("[ExSelect] handleFilter filtering", value);
      
              this.selectOptions = this.options.filter((item) => {
                if (this.optionLabel) { // search the display property
                  return item[this.optionLabel].toLowerCase().indexOf(input) > -1;
                }
      
                return item.toLowerCase().indexOf(input) > -1;
              });
            });
          }
      
        }
      };
      
      </script>
      

      I’m still learning Vue so there are probably better ways to do some things but might help out someone trying to do a similar thing.

      posted in Show & Tell
      M
      minimalicious

    Latest posts made by minimalicious

    • How can I prevent input labels moving when form data loads?

      When I click on a record in a search listing component the app then goes to the record detail component.

      It has a form and input controls. When the data is loaded in “created” event I see the input labels move above the data. Like the form is empty then when data loaded the labels move.

      It’s not the worst thing but if there is a way to stop it then it would be good.

      An example
      https://imgur.com/a/d06B0Ct

      Any ideas? thanks

      posted in Help
      M
      minimalicious
    • RE: [Solved] File download suppressed?

      @rconstantine do you have the right content type for the file being downloaded? like “application/pdf” for a PDF file

      Maybe write a simple html file to test outside of your app if your api works correctly.
      Basic script using fetch to just make the post and see what it returns outside of quasar.
      That way you know the API is ok or not.

      posted in Help
      M
      minimalicious
    • RE: [How To] Building components with Quasar

      Oh thanks, that is a handy shortcut to the attributes.

      posted in Show & Tell
      M
      minimalicious
    • RE: [How To] Building components with Quasar

      I tried to follow this guide but I think the quasar API has changed so much that it doesn’t work anymore.

      I managed to make a wrapped q-select that works and might be helpful if you are wrapping quasar (or Vue) components

      I wanted a q-select that would have basic filtering enabled. e.g. It could replace q-select and not have to setup extra code for filtering.

      <ex-select v-model.number="product.supplierId" label="Supplier"
                             :options="supplierListSorted"
                             option-value="supplierId"
                             option-label="companyName"
                             emit-value map-options 
                             filled />
      

      Vue components can use v-bind="$attrs" to bind any attributes that do not match the component params e.g. if you use <ex-select filled … then the filled attribute will be passed down to the component automatically.

      The same applies for v-on="$listeners" where any event handlers will be passed down to the component. v-model binds the input event so this is why it works without any extra code.

      The props “options”, “optionValue” and “optionLabel” are declared because I want to use them in the component code. So if you need to work with an attribute then you need to declare it and add it manually to the wrapped component.

      There is code to work with lists that have a key value and display value e.g. supplierId and supplierName. If optionLabel is set, then filter on that property on the object. Otherwise assume the array just contains string values and filter directly.

      Here is the full ExSelect.vue code

      <template>
        <q-select
          v-bind="$attrs"
          use-input
          fill-input
          hide-selected
          input-debounce="0"
          :options="selectOptions"
          :option-label="optionLabel"
          :option-value="optionValue"
          v-on="$listeners"
          @filter="handleFilter">
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                No results
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </template>
      
      <script>
      export default {
        name: "ExSelect",
        // eslint-disable-next-line
        props: ["options", "optionValue", "optionLabel"], 
        data() {
          return {
            selectOptions: null
          };
        },
        updated() {
          if (!this.selectOptions) {
            console.log("[ExSelect] updated options is ", this.options);
            // keep a copy of the original options list
            this.selectOptions = this.options.slice();
          }
        },
        methods: {
      
          handleFilter(value, doneFunc) {
            console.log("[ExSelect] handleFilter", value);
            if (value === "") {
              doneFunc(() => {
                // reset the list
                console.log("[ExSelect] handleFilter reset list", value);
                this.selectOptions = this.options.slice();
              });
              return;
            }
      
            doneFunc(() => {
              const input = value.toLowerCase();
              console.log("[ExSelect] handleFilter filtering", value);
      
              this.selectOptions = this.options.filter((item) => {
                if (this.optionLabel) { // search the display property
                  return item[this.optionLabel].toLowerCase().indexOf(input) > -1;
                }
      
                return item.toLowerCase().indexOf(input) > -1;
              });
            });
          }
      
        }
      };
      
      </script>
      

      I’m still learning Vue so there are probably better ways to do some things but might help out someone trying to do a similar thing.

      posted in Show & Tell
      M
      minimalicious