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. Salim Larhrib
    S
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 6
    • Best 0
    • Groups 0

    Salim Larhrib

    @Salim Larhrib

    0
    Reputation
    1
    Profile views
    6
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Salim Larhrib Follow

    Latest posts made by Salim Larhrib

    • RE: Quasar v2.0.0-beta.1 released! Vue 3, here we come!

      Hi,
      Nice job. In hurry to discover…
      Thanks!!

      posted in Announcements
      S
      Salim Larhrib
    • RE: Quasar v1.15.2 released! Enjoy!

      Hi,
      A few days ago, I have discovered this wonderful framework. I thank you for crazy energy you deploy everyday.
      Regards.

      posted in Announcements
      S
      Salim Larhrib
    • Q-Select filter an array of objects

      Hi everybody,
      I have created a Q-Select component which filters array of objects.

      <template>
        <q-select
          class="custom-selection"
          dense options-dense use-input
          v-model="innerValue"
          v-bind="$attrs"
          v-on="$listeners"
          :options="stringOptions"
          filter @filter="HandleFilter"
          hint="Minimum 3 characters to run filter"
        ></q-select>
      </template>
      

      Because of :options is binded to array of objects, I cannot use the quasar example filter. I have tried to do my own but I cannot access to this.$attrs.optionValue. Can somebody tell me how to reach this property or I have to bind it by hand in the props array ???

      <script>
      export default {
        name: 'SelectFilter',
        props: ['value', 'options'],
        data () {
          return {
            stringOptions: null
          }
        },
        computed: {
          innerValue: {
            get () {
              return this.value
            },
            set (value) {
              this.$emit('input', value)
            }
          }
        },
        methods: {
          HandleFilter (val, update, abort) {
            if (val.length < 3) {
              abort()
              return
            }
            update(() => {
              const needle = val.toLowerCase()
              this.stringOptions = this.options.filter(
                v => v[this.$attrs.optionValue].toLowerCase().indexOf(needle) > -1
              )
            })
          }
        }
      }
      

      Thank you.

      posted in CLI
      S
      Salim Larhrib
    • RE: qInput component with 2-ways-bind

      Hello,
      Again another example to simplify 2 ways bindings thanks to computed getter and setter. https://tahazsh.com/vuebyte-computed-setters
      Regards.

      posted in Help
      S
      Salim Larhrib
    • RE: qInput component with 2-ways-bind

      Hi Dobbel,
      Thank you for your links. I will take a look to mixins to extend existing Quasar components.
      I have also found a very interesting post which purposes a better solution with computed functions to manage the local v-model innerValue : https://forum.quasar-framework.org/topic/3208/adding-custom-functionality-to-quasar-s-components

      posted in Help
      S
      Salim Larhrib
    • qInput component with 2-ways-bind

      Hi all,
      I have discovered Quasar 2 days ago and have started to play with. I need to do 2-ways-bind between a vue3 page and an included q-input descendant.
      It took time but it works. I need an advice if there is a better solution or my way to do is the right one.
      To be short, I have created a local v-model in the component and made a main model update with an emit event.

      <template>
        <div>
          <q-input
            class="col-md-2"
            v-model="innerValue"
            :label="pLabel"
            :placeholder="pPlaceholder"
            dense
            @input="updateValue($event)"
          />
        </div>
      </template>
      
      <script>
      export default {
        name: 'BaseInput',
        props: {
          modelValue: {
            type: [String, Number],
            default: '',
            required: true
          },
          pLabel: {
            type: String,
            required: true
          },
          pPlaceholder: {
            type: String,
            default: ''
          },
          pType: {
            type: String,
            default: 'text'
          },
          pIcon: {
            type: String,
            default: ''
          }
        },
        data () {
          return {
            innerValue: this.modelValue
          }
        },
        methods: {
          updateValue () {
            this.$emit('input', this.innerValue)
          },
          handleChange () { console.log('Change event') }
        },
        model: {
          // Quasar components waits "value" property when Vue3 sends "modelValue"
          // though v-model call.
          // We translate "value" property to "modelValue"
          type: String,
          prop: 'modelValue'
        }
      }
      

      To use the BaseInput component, I include it in my template like this:

      <!-- Field Start Date -->
      <BaseInput
        v-model="dName"
        label="User Name "
        placeholder="Insert unique user name"
      />
      ....
        data () {
          return {
            dName: 'Tartempion',
      .....
      

      I am Waiting for your comments and nice advices to improve this 2-ways binding solution.
      Thanks to all.

      posted in Help
      S
      Salim Larhrib