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 it possible to use Square brackets in v-model name

    Help
    2
    3
    157
    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.
    • T
      Tempest last edited by

      Hi, is there a way to have or escape the square brackets in a v-model name so Vue doesn’t see it as an array or object?

      v-model="item.lastservice[before]"
      

      The reason why I’m asking is that I’m using Symphony and api-platform for my api, and api-platform “Default” DateFilter requires the query to be sent like this:
      ‘createdAt’ is a single field
      api-platform date filter docs

      /offers?createdAt[after]=2018-03-19&createdAt[before]=2018-04-19
      

      I used the api-platform client generator for quasar which generated the filter form with the q-input and q-date like this

      <q-input filled v-model="item.createdAt[before]" :label="$t('createdAt[before]')" class="col-12 col-md">
              <template v-slot:prepend>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy transition-show="scale" transition-hide="scale">
                    <q-date v-model="item.createdAt[before]" mask="YYYY-MM-DD HH:mm" />
                  </q-popup-proxy>
                </q-icon>
              </template>
      
              <template v-slot:append>
                <q-icon name="access_time" class="cursor-pointer">
                  <q-popup-proxy transition-show="scale" transition-hide="scale">
                    <q-time v-model="item.createdAt[before]" mask="YYYY-MM-DD HH:mm" format24h />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
      

      but obviously Vue see’s this as an error as it thinks the property ‘before’ isn’t declared, but ‘before’ isn’t a property it is part of the name createdAt[before]

      I have tried using q-date with range but as it sets from and to api-platform ignores it as it wants ‘before’ and ‘after’ and not ‘to’ & ‘from’

      any pointers would be most appreciated

      metalsadman 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @Tempest last edited by metalsadman

        @tempest try with v-model="item['createdAt[before]']", but imo you could just parse/change it in the client side before using it, that sort of property naming is problematic with the square brackets.

        T 1 Reply Last reply Reply Quote 0
        • T
          Tempest @metalsadman last edited by

          @metalsadman OMG that simple, thank you so much!!!

          I’ve been banging my head on a wall for days trying to figure this out,

          I totally agree formatting before passing, or even better to have 2 separate fields (searchFrom and searchTo) in the restapi, but as I’m new to the whole vue/quasar and api-platform, the client generator has helped me get a good head start (whilst learning) building our new customer portal, the old code, in appcelerator and using FrapiAPI, is so outdated it’s hilarious, and I’m loving Quasar, and so is my customers
          Thank you again

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