Can't get QPopupEdit to run (w/o QTable)



  • Hello

    I see that only @hide and @show events will be emited, neither @save nor @cancel:

     <div>
              {{ dueDate }}
              <q-popup-edit
                v-model="dueDate"
                @hide="hide(dueDate)"
                @show="show(dueDate)"
                @save="(val, iVal) => save(val, dueDate)"
                @cancel="cancel(dueDate)"
              >
                <q-input v-model="dueDate" dense autofocus />
              </q-popup-edit>
    </div>
    
    computed: {
        dueDate: {
          set (dueDate) {
    
          },
          get () {
            return (this.project.due_date)
              ? this.$d(new Date(this.project.due_date), 'short')
              : ''
          }
        }
      },
    
      methods: {
        save (val, iVal) {
          console.log(val, iVal, 'save')
        },
        show (val) {
          console.log(val, 'show')
        },
        hide (val) {
          console.log(val, 'hide')
        },
        cancel (val) {
          console.log(val, 'cancel')
        }
      }
    

    When I open the field and change the value, in vue console are apearing the events before-show, input, focus, show, change , before-hide , hide .

    My template markup follows the example in the Quasar docs “https://quasar.dev/vue-components/popup-edit#Example-outside-of-QTable

    <div class="cursor-pointer">
          {{ label }}
          <q-popup-edit v-model="label">
            <q-input v-model="label" dense autofocus counter />
          </q-popup-edit>
        </div>
    

    Does anybody has an idea, what might go wrong here? Any hint is greately appreciated. Thany you

    Axel



  • from https://forum.quasar-framework.org/topic/3607/solved-qpopupedit-in-qtable-with-vuex-data-source-do-not-emitted-save-event/15

    I found this:

    @metalsadman Thank you for the codepen!!
    I didn’t get that @save only fires if the value has changed. Makes sense now.
    Before writing my actions and mutations, I was trying to test with console logs, but since I wasn’t modifying my state (yet), the saves weren’t firing at all.
    @sontis: I’m grabbing the @save event on the q-popup-edit and calling an action to write to my API. On the q-input inside the popup, I’m grabbing @input and calling a mutation to set the vuex store.
    Now that the state is actually changing, q-popup-edit fires the @save event when I click the “set” button, and the API only gets hit then, not on every keystroke.

    So I added the @input event to my input field:

    <q-input v-model="dueDate" @input="(v) => {input(v)}" dense autofocus />
    

    and im my methods

    input (val) {
          console.log(val, 'input')
          this.dueDate = val
        }
    

    but no save event was comming.

    Oh I changed it once again - vom v-model to :value, but no result:

    <q-input :value="dueDate" @input="(v) => {input(v)}" dense autofocus />
    

    Axel



  • @awustemann your computed prop setter dueDate: { set (dueDate) { // suppose to set something here no? }, doesn’t do anything.



  • @metalsadman

    No, up to now it does nothing. I wrote it due to a warning in the console. I’m pritty new to JS, VUE and Quasar ;=)

    I now found, that all is obviously the same thing as in the mentioned post, above. When I update in @input my vuex state, save will be fired. And it works then also with v-model. But input fires on each keystroke, right? Therefore you gave the hint, one should have a local copy of the vuex state, right? But this seems pritty complicated to me.

    Thank you ;=)


Log in to reply