How to use @save event in q-popup-edit

[diadal]

have tried @save ="useEditLabel" @save ="useEditLabel()" @save="useEditLabel(null, null)" none of this work but other events were working like @show="useEditLabel()" @before-hide="useEditLabel()" working but @save and @cancel were not

  <div class="q-pa-md">
    <div class="cursor-pointer">
      {{ accLabel }} {{test}}
      <q-popup-edit v-model="label" buttons @save ="useEditLabel">
        <q-input v-model="accLabel" dense autofocus counter />
        <template v-slot:append>
          <q-icon name="mode_edit" color="primary" />
        </template>
      </q-popup-edit>
    </div>
  </div>

</div>

const { ref } = Vue;
const QPopupEdit = Quasar.QPopupEdit;
const app = Vue.createApp({
  components: {
    QPopupEdit
  },
  setup() {
    const test = ref("to change this");
    const accLabel = ref("Click Here");
    function useEditLabel(e='test1',x='test2') {
      console.log(e);
      test.value = e;
    }
    return {
      useEditLabel,
      test,
      accLabel
    };
  }
});

app.use(Quasar, {
  components: {
    QPopupEdit
  }
});
app.mount("#q-app");

[dobbel]

@diadal

You do know quasar v3 is still in beta and you’re using the composition api.

Anyway could you create a codepen.io so we can give you better support.

[diadal]

have fixed this thanks

[dobbel]

@diadal

would you be so kind to post what the fix was?

[diadal]

this works for me @update:modelValue="e.accLabel = scope.value" @keyup.enter="scope.set"

<q-popup-edit
                  v-model="e.accLabel"
                  buttons
                  :validate="(val) => val.length > 0"
                  @save="useEditLabel(e)"
                >
                  <template v-slot="scope">
                    <q-input
                      v-model="scope.value"
                      dense
                      autofocus
                      counter
                      :rules="[
                        (val) =>
                          scope.validate(scope.value) || 'More than 5 chars required',
                      ]"
                      @update:modelValue="e.accLabel = scope.value"
                      @keyup.enter="scope.set"
                    >
                      <template v-slot:append>
                        <q-icon name="mdi-lead-pencil" color="primary" />
                      </template>
                    </q-input>
                  </template>
                </q-popup-edit>

[alexrose]

@diadal said in How to use @save event in q-popup-edit:

@update:modelValue=“e.accLabel = scope.value”
@keyup.enter=“scope.set”

Can you provide this solution on codesandbox?

I tried emit empty Value, to Save it on Vuex and send API request.

[netbka]

For me worked the following: I added: v-slot=“scope” to the q-popup-edit

<q-popup-edit v-model=“initialValue” v-slot=“scope” buttons @save=“save”>

and then I replaced my v-model inside q-input to this:

<q-input v-model=“scope.value” >