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. pospi
    P
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 17
    • Best 0
    • Groups 0

    pospi

    @pospi

    0
    Reputation
    2
    Profile views
    17
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    pospi Follow

    Latest posts made by pospi

    • edit array inputs

      Hi, I have this basic problem 😞

      I have vuex store :

      const state = {
          preuverovaniForm: {
              loanAgreements: {
                 '111111': {
                    loanNumber: '111111',              
                    product: '',
                    note: ''
                  },
                  '222222': {
                    loanNumber: '222222',
                    product: '',
                    note: ''
                  },
              }
          }
      }
      
      const mutations = {
          updatePreuverovaniForm (state, payload) {
              Object.assign(state.preuverovaniForm, payload.update)
          }
      }
      
      const actions = {
          updatePreuverovaniForm ({ commit }, payload) {
              commit('updatePreuverovaniForm', payload)
          },
      }
      
      const getters = {
          preuverovaniForm: (state) => {
              return state.preuverovaniForm
          }
      }
      
      export default {
          namespaced: true, // vice stavu
          state,
          mutations,
          actions,
          getters
      }
      

      in vue view it is show as :

      <q-tabs v-model="tab" :dense="dense">
         <q-tab v-for="(agreement, key) in preuverovaniForm.loanAgreements" v-bind:key="key" :name="agreement.loanNumber" :label="agreement.loanNumber" />
      </q-tabs>
      <q-tab-panels v-model="tab" class="custom-tab-panels" animated swipeable transition-prev="jump-up" transition-next="jump-up">
      	<q-tab-panel v-for="(agreement, key) in preuverovaniForm.loanAgreements" v-bind:key="key" :name="agreement.loanNumber" class="row q-col-gutter-x-md q-col-gutter-y-lg q-pt-none q-pl-sm">
            <q-input v-model="agreement.loanNumber" label="Číslo uvěrové smlouvy" outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" :dense="dense" />
            <q-input v-model="agreement.product" label="Produkt" outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" :dense="dense" />
            <q-input v-model="agreement.note" label="Poznámka" outlined class="col-12" type="textarea" :dense="dense" />
          </q-tab-panel>
      </q-tab-panels>
      

      and

      <script>
      import { defineComponent, ref } from 'vue';
      import { mapGetters, mapActions } from "vuex";
      
      export default defineComponent({
        name: 'Přeúvěrování',
        setup() {
          return {
            dense: true,
            loading_addNewAgreement: ref(false),
            loading_addChangeAgreement: ref(false),
            loading_addRemoveAgreement: ref(false),
            readonly: true, 
            newLoanBlankInputs: '',
          };
        },
        computed: {    
          ...mapGetters({
            preuverovaniForm: 'preuverovani/preuverovaniForm'
          })  
        },
        methods: {    
          ...mapActions('preuverovani', ['updatePreuverovaniForm','updateLoanAgreements'])
        }
      });
      </script>
      

      My question is : How to do that if i write to <q-input v-model=“agreement.product”> or <q-input v-model=“agreement.note” label=“Poznámka”> it will be immediately updating loanAgreements array in store .

      I will be very grateful for any help, thanks

      posted in Help
      P
      pospi
    • RE: quasar v2 vuex

      @metalsadman Thanks, it helped me a lot !

      posted in Help
      P
      pospi
    • quasar v2 vuex

      Hi, I have problem with vuex :
      store/store-client.js :

      const state = {
          searchForm: {
              retenceNumber: '',
              clientName: '',
              birthNumber: '',
              partnerNumber: '',
              loanNumber: ''
          },
          resultForm: {
            clientName: '',
            phoneNumber: '',
            email: '',
            birthDate: '',
            birthNumber: '',
            partnerNumber: '',
            psc: '',
            cmp: '',
            emailGarant: ''
          }
      }
      
      const mutations = {
      
      }
      
      const actions = {
      
      }
      
      const getters = {
          searchForm: (state) => {
              return state.searchForm
          },
          resultForm: (state) => {
              return state.resultForm
          }
      }
      
      export default {
          namespaced: true,
          state,
          mutations,
          actions,
          getters
      }
      

      store/index.js

      import { store } from 'quasar/wrappers'
      import { createStore } from 'vuex'
      
      import client from './store-client'
      
      /*
       * If not building with SSR mode, you can
       * directly export the Store instantiation;
       *
       * The function below can be async too; either use
       * async/await or return a Promise which resolves
       * with the Store instance.
       */
      
      export default store(function (/* { ssrContext } */) {
        const Store = createStore({
          modules: {
            client
          },
      
          // enable strict mode (adds overhead!)
          // for dev mode and --debug builds only
          strict: process.env.DEBUGGING
        })
      
        return Store
      })
      

      pages/Klient_tab.vue

      <template>
        <q-page class="items-start justify-start q-pa-md">
          <div class="row no-wrap items-center">
            <h5 class="page-title">Klient</h5>  
            <q-space /> 
            <q-btn  color="primary" label="Vyhledat" :disable="searchEnabled" @click="searchForClient" :loading="loading" style="width: 150px">
              <template v-slot:loading>
                <q-spinner-hourglass class="on-left" />
                Načítám ...
              </template>
            </q-btn>      
            <div class="col-xs-none col-sm-none col-md-none col-lg-2" />
          </div>
          <div class="text-subtitle2 q-pt-none q-pl-xs">Vyhledávání</div>
          <div class="row q-col-gutter-x-md q-col-gutter-y-lg q-pt-md q-pl-sm">        
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.retenceNumber" type="search" label="Retence č." :dense="dense">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.clientName" type="search" label="Jméno klienta" :dense="dense">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.birthNumber" type="search" label="Rodné číslo" :dense="dense">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.partnerNumber" type="search" label="Číslo partnera" :dense="dense">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.loanNumber" type="search" label="Číslo úvěru" :dense="dense">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>      
          </div>
          <div class="text-subtitle2 q-pt-md q-pl-xs">Načtená data o klientovi</div>
          <div class="row q-col-gutter-x-md q-col-gutter-y-lg q-pt-md q-pl-sm">
            <q-input outlined class="col-xs-12 col-sm-8 col-md-6 col-lg-4" v-model="resultForm.clientName" label="Jméno klienta" :dense="dense" readonly />
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.phoneNumber" label="Telefon" :dense="dense" readonly />
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.email" label="Email" :dense="dense" readonly />
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.birthDate" label="Datum narození" :dense="dense" readonly />
          </div>
          <div class="row q-col-gutter-x-md q-col-gutter-y-lg q-pt-xs q-pl-sm">
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.birthNumber" label="Rodné číslo" :dense="dense" readonly />
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.partnerNumber" label="Číslo partnera" :dense="dense" readonly />
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.psc" label="PSČ klienta" :dense="dense" readonly />
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.cmp" label="ČMP garanta" :dense="dense" readonly />
            <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.emailGarant" label="Email garanta" :dense="dense" readonly />
          </div>
        </q-page>
      </template>
      
      <script>
      import { defineComponent, ref } from "vue";
      import { mapGetters } from "vuex";
      
      export default defineComponent({
        name: "Klient",
        setup () {
          return {
            dense: true,
            loading: ref(false)
          };
        },  
        computed: {
          searchEnabled () {
            return this.searchForm.retenceNumber.length <= 0 &&
              this.searchForm.clientName.length <= 0 &&
              this.searchForm.birthNumber.length <= 0 &&
              this.searchForm.partnerNumber.length <= 0 &&
              this.searchForm.loanNumber.length <= 0;
          },
          ...mapGetters('client', [searchForm, resultForm])
          /*searchForm () {
            return this.$store.getters['client/searchForm']
          },
          resultForm () {
            return this.$store.getters['client/resultForm']
          } */   
          
        },
        methods: {
          async searchForClient () {
            this.loading = true
            //var rdata = await this.$axios.get('api/RetCalc/GetSearchClient')      
            //this.searchForm = rdata.data.data2.searchForm
            //this.resultForm = rdata.data.data2.resultForm
            this.searchForm.clientName = 'Franta Omacka'
            this.loading = false
            
          }
        }
      });
      </script>
      
      <style></style>
      

      in console warning : vue-router.esm-bundler.js?f6c4:71 [Vue Router warn]: ReferenceError: searchForm is not defined

      and page is empty

      but if i change maping to computed prop :

      computed: {
          searchEnabled () {
            return this.searchForm.retenceNumber.length <= 0 &&
              this.searchForm.clientName.length <= 0 &&
              this.searchForm.birthNumber.length <= 0 &&
              this.searchForm.partnerNumber.length <= 0 &&
              this.searchForm.loanNumber.length <= 0;
          },
          //...mapGetters('client', [searchForm, resultForm])
          searchForm () {
            return this.$store.getters['client/searchForm']
          },
          resultForm () {
            return this.$store.getters['client/resultForm']
          }    
          
        },
      

      it is working

      What i do wrong ?

      posted in Help
      P
      pospi
    • RE: Problem with creating new project , dev not running

      PROBLEM SOLVED :
      watch out for the exclamation mark in the path where your quasar project running !!!
      My path was : C:\Users\Jan.Pospisil\source\repos!Tests\QuasarTestProjekt\testClient>quasar dev
      but , in quasar script was only : C:\Users\Jan.Pospisil\source\repos!Tests\QuasarTestProjekt\testClient>quasar dev
      so dependencies were not found.
      Thank all

      posted in Help
      P
      pospi
    • RE: Run dev error while running a new project.

      Hi I have same problem , remove .babelrc dont work , also the other things that you here recommended. Please help.

      posted in CLI
      P
      pospi
    • RE: Problem with creating new project , dev not running

      No solution ? I found some issue on this forum : https://forum.quasar-framework.org/topic/3480/run-dev-error-while-running-a-new-project/24?_=1614551283719 .
      but nothing works ,

      posted in Help
      P
      pospi
    • RE: Problem with creating new project , dev not running

      In meantime i google this issue : https://github.com/quasarframework/quasar/issues/4835
      but no solution from this thread worked for me
      so im sure that it’s not definitely network problem . it is problem with packages

      posted in Help
      P
      pospi
    • RE: Problem with creating new project , dev not running

      so where is PROBLEM ?

      posted in Help
      P
      pospi
    • RE: Problem with creating new project , dev not running

      The good one PC have same npm packages as the bad one , same quasar info (except IP adresses) :
      C:\Users\pospi\source\repos\WebApplication1\testApp>quasar info

      Operating System - Windows_NT(10.0.19042) - win32/x64
      NodeJs - 12.21.0

      Global packages
      NPM - 6.14.11
      yarn - 1.22.10
      @quasar/cli - 1.1.3
      @quasar/icongenie - Not installed
      cordova - Not installed

      Important local packages
      quasar - 1.15.4 – Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
      @quasar/app - 2.1.15 – Quasar Framework local CLI
      @quasar/extras - 1.9.17 – Quasar Framework fonts, icons and animations
      eslint-plugin-quasar - Not installed
      vue - 2.6.12 – Reactive, component-oriented view layer for modern web interfaces.
      vue-router - 3.2.0 – Official router for Vue.js 2
      vuex - 3.6.0 – state management for Vue.js
      electron - Not installed
      electron-packager - Not installed
      electron-builder - Not installed
      @babel/core - 7.13.1 – Babel compiler core.
      webpack - 4.44.2 – Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, … and your custom stuff.
      webpack-dev-server - 3.11.0 – Serves a webpack app. Updates the browser on changes.
      workbox-webpack-plugin - Not installed
      register-service-worker - 1.7.1 – Script for registering service worker, with hooks
      typescript - 3.9.5 – TypeScript is a language for application scale JavaScript development
      @capacitor/core - Not installed
      @capacitor/cli - Not installed
      @capacitor/android - Not installed
      @capacitor/ios - Not installed

      Quasar App Extensions
      None installed

      Networking
      Host - DESKTOP-B2A313G
      Ethernet0 - 192.168.252.129

      posted in Help
      P
      pospi
    • RE: Problem with creating new project , dev not running

      I try on another PC same installation process and it was succesful (with ip 0.0.0.0) , so problem is not an ip address . How i do clean installation of node.js , npm and yarn , thanks

      posted in Help
      P
      pospi