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. sontis
    S
    • Profile
    • Following 0
    • Followers 1
    • Topics 2
    • Posts 15
    • Best 2
    • Groups 0

    sontis

    @sontis

    2
    Reputation
    167
    Profile views
    15
    Posts
    1
    Followers
    0
    Following
    Joined Last Online
    Location Russia

    sontis Follow

    Best posts made by sontis

    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @metalsadman thank you.
      I found another solution.
      I create the local buffer for v-model of the QPopupEdit. In @show event I fill this buffer from Vuex data and in @save event I invoke REST Api “update” method and change Vuex data. It seems so much easier. I have code like this:

      <q-table ...  :data="ds">
      ...
        <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="desc" :props="props">
                  {{ props.row.email }}
                  <q-popup-edit v-model="popupEditData"
                      @show="() => showPopup(props.row, 'name')"
                      @save="(val, initval) => onUpdateDocument(val, props.row, 'name')"
                      buttons>
                    <q-input v-model="popupEditData" counter/>
                  </q-popup-edit>
                </q-td>
                ...
              </q-tr>
        </template>
      ...
      </q-table>
      ...
      export default {
        data() {
          return {
            popupEditData: '',
          };
      
        computed: {
          ...mapState({
            ds: state => state.ds.dsCustomers
          }),
      
        methods: {
          ...mapActions({
            getDocuments: 'ds/getCustomers',
            updateDocument: 'ds/updateCustomer',
          }),
      
          showPopup(row, col) {
            this.popupEditData = row[col];
          },
      
          onUpdateDocument(val, row, col) {
            this.setLoading(true);
            const updatedRow = extend({}, row);
            updatedRow[col] = val;
            const res = this.updateDocument(updatedRow);
            res.then((response) => {
              ...
              this.getDocuments();
            })
              .catch((err) => {
                ...
              })
              .finally(() => {
                this.setLoading(false);
              });
          },
      
      posted in Framework
      S
      sontis
    • How to debug Main thread of Electron Quasar App?

      I created my simply Electron Quasar App from “Developing Electron Apps” Guide and run command “quasar dev -m electron -d”.
      And then I open Crome DevTools for Node and would like debug electron-main.js, but see “eval(”…") strings.
      I see in quasar-config.js from quasar-cli sources:
      devtool: this.ctx.dev ? ‘#cheap-module-eval-source-map’ : '#source-map’
      I think this is source of my troubles.
      Help me please solve the problem.

      posted in CLI
      S
      sontis

    Latest posts made by sontis

    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @metalsadman thank you.
      I found another solution.
      I create the local buffer for v-model of the QPopupEdit. In @show event I fill this buffer from Vuex data and in @save event I invoke REST Api “update” method and change Vuex data. It seems so much easier. I have code like this:

      <q-table ...  :data="ds">
      ...
        <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="desc" :props="props">
                  {{ props.row.email }}
                  <q-popup-edit v-model="popupEditData"
                      @show="() => showPopup(props.row, 'name')"
                      @save="(val, initval) => onUpdateDocument(val, props.row, 'name')"
                      buttons>
                    <q-input v-model="popupEditData" counter/>
                  </q-popup-edit>
                </q-td>
                ...
              </q-tr>
        </template>
      ...
      </q-table>
      ...
      export default {
        data() {
          return {
            popupEditData: '',
          };
      
        computed: {
          ...mapState({
            ds: state => state.ds.dsCustomers
          }),
      
        methods: {
          ...mapActions({
            getDocuments: 'ds/getCustomers',
            updateDocument: 'ds/updateCustomer',
          }),
      
          showPopup(row, col) {
            this.popupEditData = row[col];
          },
      
          onUpdateDocument(val, row, col) {
            this.setLoading(true);
            const updatedRow = extend({}, row);
            updatedRow[col] = val;
            const res = this.updateDocument(updatedRow);
            res.then((response) => {
              ...
              this.getDocuments();
            })
              .catch((err) => {
                ...
              })
              .finally(() => {
                this.setLoading(false);
              });
          },
      
      posted in Framework
      S
      sontis
    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @metalsadman
      “…suggestion to copy it in local…”
      In this case, I don’t need Vuex 🙂 (data duplication/synchronization)
      In Vuex Guide Form Handling recommends:
      “…The “Vuex way” to deal with it is binding the <input>'s value and call an action on the input or change event…”
      But the problem is that the quasar does not allow to mutate the properties of vuex storage objects.

      posted in Framework
      S
      sontis
    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @metalsadman thanks for good example.
      If you set Vuex strict mode in the “…/store/index.js”:

        const Store = new Vuex.Store({
          strict: true,
          modules: {
            vuexDataTable
          }
        });
      

      then you see vuex errors after editing fields (check codesandbox console)
      ![screenshot]
      vuex-err.png

      posted in Framework
      S
      sontis
    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @metalsadman
      But then I have to have a local copy data source and synchronize it with the vuex data source.
      Why then need vuex? 🙂
      Sorry, I am not a native English speaker. Maybe I got a mistake with the thread’s title

      posted in Framework
      S
      sontis
    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @metalsadman
      Your codepen consists code:

      <q-input :value="props.row.name" dense autofocus counter @input="v => {props.row.name = v}"></q-input>
      

      If you will be use Vuex Store as the data source for your QTable, then each key press in the QPopupEdit will be modificate Vuex Store data without vuex mutation. This will cause an error

      vue.runtime.esm.js:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.
      

      See posts above.
      Therefore, in the case of QPopupEdit + Vuex + Rest Api + DB I have the messy code.

      posted in Framework
      S
      sontis
    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @metalsadman thank you for the codepen and the explanation. The code (with using @input event) now works, BUT:
      I have the following data processing GUI -> Vuex -> REST Api -> DB Store.
      And I have now the messy code, because,

      • In @input event handler in QInput need update ONLY Vuex store. I do not want to invoke REST api after each key press. For this I have mutation and in during editing in the QPopupEdit the Vuex Store is unsynchronized with the DB Store. At this time, all GUI elements using this data will show an incorrect value.
      • In @save event handler in the QPopupEdit need send data by REST and if response OK then update Vuex Store.
      • In@cancel event handler in the QPopupEdit need recover Vuex Store back.
        The worst is Vuex Store is unsynchronized with the DB Store at some point. All GUI elements (which used this data) will not be displayed correctly.
      posted in Framework
      S
      sontis
    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @qyloxe
      I think this is a QPopupEdit behaviour problem.
      Anyway, @qyloxe, thanks for the advice.

      posted in Framework
      S
      sontis
    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @qyloxe thanks for the advice to use vuex-orm. But this thing does not solve data processing problems in the QPopuEdit. Could you show a working example?
      I see the following main problems in the QPopupEdit & Vuex:
      In case of v-model, QPopupEdit (QInput) emits input event that causes Vuex data modification error;
      In case of :value, QPopupEdit does not emit save event for correct Vuex data modification.

      posted in Framework
      S
      sontis
    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @metalsadman
      Your solution is not suitable for using vuex data source. In this case (v-model) I have vuex errors:

      vue.runtime.esm.js:619 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."
      (found in <Root>)
      
      vue.runtime.esm.js:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.
          at assert (vuex.esm.js:87)
          at Vue.store._vm.$watch.deep (vuex.esm.js:763)
          at Watcher.run (vue.runtime.esm.js:4562)
          at Watcher.update (vue.runtime.esm.js:4536)
          at Dep.notify (vue.runtime.esm.js:730)
          at Object.reactiveSetter [as name_ru] (vue.runtime.esm.js:1055)
          at Proxy.set (vue.runtime.esm.js:1077)
          at callback (countries.vue?d101:136)
          at invokeWithErrorHandling (vue.runtime.esm.js:1854)
          at VueComponent.invoker (vue.runtime.esm.js:2179)
      (found in <Root>)
      

      In my component I use Vuex ds like this:

      <q-table ...  :data="ds">
      ...
      </q-table>
      ...
        computed: {
          ...mapState({
            ds: state => state.ds.dsCustomers
          }),
      ...
          ...mapActions({
            updateDocument: 'ds/updateCustomer',
          }),
      

      I also tested another case with the same Vuex errors:

      ...
        computed: {
          ds: {
            get() {
              return this.$store.state.ds.dsCustomers;
            },
            set(value) {
              this.$store.commit('setDsCustomers', value);
            },
          },
      
      
      posted in Framework
      S
      sontis
    • RE: [SOLVED] QPopupEdit in QTable with Vuex data source - Do not emitted save event.

      @metalsadman
      I want to use Vuex data as the data source for QTable. In event @save I want to update data source by calling Vuex async action with invoke REST service. If I use v-model, then I have Vuex data modification error.
      I already had a issue about this.
      smolinari advised to use value in the case of Vuex.

      posted in Framework
      S
      sontis