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. valasek
    3. Topics
    • Profile
    • Following 0
    • Followers 0
    • Topics 7
    • Posts 20
    • Best 5
    • Groups 0

    Topics created by valasek

    • valasek

      [SOLVED] QENV - quasar dev vs yarn dev - quasar dev does not apply qenv variables
      [v1] App Extensions • • valasek

      4
      0
      Votes
      4
      Posts
      452
      Views

      Hawkeye64

      yarn dev is running your dev script from your package.json. This script is doing the env for node, before Quasar is started so it can be accessed in that instance.
      quasar dev by itself has no hooks for this and your package.json scripts are not called.

    • valasek

      List of Starter Kits per Programming Language and the Backend Framework
      Starter Kits • • valasek

      6
      5
      Votes
      6
      Posts
      1492
      Views

      B

      thanks @tohagan I’m working on polishing the rough edges and would love to have it on Quasar Awesome. I’m still very new to working with Quasar but I love the idea and it has been a joy to work with so far. @valasek thanks for adding my project to the starter kit list here. I’m trying to follow best practices from documentation and get advice from people who are experts in the various areas that it touches on. Hopefully I can share my experiences and lessons learned and get more people to try out Quasar!

    • valasek

      q-popup-proxy is not closing q-date popup using refs
      Help • • valasek

      11
      0
      Votes
      11
      Posts
      977
      Views

      H

      Hi:
      I have the same problem as you. I have verified that if I put the component inside a v-for it does not work. With this check I assumed that ref must be an array not a single value. (https://stackoverflow.com/questions/52086128/vue-js-ref-inside-the-v-for-loop)
      So my solution was:
        <template v-for = “(item, i) in items”>
      …
         <q-popup-proxy ref = “MyReferences”>
                <q-date
                   …
                   @input = “() => $ refs.MyReferences [i] .hide ()”
                />
        </q-popup-proxy>
      …
      </template>
      Where i = 0,1,2, …
      I do not know if in your case this helps you, but to me your doubt helped me to solve mine, thanks 🙂

    • valasek

      How to start contributing ...
      Framework • • valasek

      2
      5
      Votes
      2
      Posts
      56
      Views

      Allan-EN-GB

      Great work @valasek .

    • valasek

      Share your tech stack and see stacks of others
      Show & Tell • • valasek

      1
      2
      Votes
      1
      Posts
      138
      Views

      No one has replied

    • valasek

      Uploader with Axios
      Help • • valasek

      12
      0
      Votes
      12
      Posts
      2973
      Views

      M

      @stukki said in Uploader with Axios:

      @marcelo I faced nearly the same problem and find a solution that works for me (Authentication not yet implemented). I’m not sure if it best practice but I also wanted the uploader to be reusable within other components and wanted to use the QUploader component because of its additional features like thumbnail, display file-size…

      I let the url parameter blank.
      I get the selected file’s details through the @added-event and safe it in a vuex store
      I trigger the upload - method outside the QUploader component

      In my uploader.vue file:

      <template> <div class="row justify-center items-center"> <div> <div class="row justify-between items-center q-px-sm" v-if="showUploadButton === false"> <div class="fa-text-dark-light">{{ deleteMethodString }}</div> <div> //youNeed <q-btn @click="deleteFile()" class="q-pl-sm" color="negative" flat icon="ion-ios-trash" round > </q-btn> </div> </div> //youNeed <q-uploader :accept="acceptedFileTypes" :label="uploaderLabel" @added="fileSelected" @removed="fileRemoved" color="grey-1" flat hide-upload-btn square text-color="accent" url="" > </q-uploader> </div> <div class="q-mt-xl" v-if="showUploadButton === true"> //youNeed <q-btn :label="$t('message.general.upload')" @click="upload()" color="accent" outline > </q-btn> </div> </div> </template> <script> import { mapGetters, mapState, mapActions } from 'vuex' export default { name: 'uploaderComponent', components: { }, data () { return { //youNeed selectedFile: false, uploaderLabel: 'Select a File', showUploadButton: false, deleteMethodString: '' } }, //youNeed watch: { selectedFile () { if (this.selectedFile === true) { this.uploaderLabel = '' this.showUploadButton = true } else { this.showUploadButton = false } } }, mounted () { this.deleteMethodString = this.deleteString this.uploaderLabel = this.uploadLabel }, computed: { ...mapGetters({ currentLanguage: 'language/statusCurrentLanguage' }), ...mapState({ fileUploadCompleted: state => state.uploader.fileUploadCompleted, concern: state => state.uploader.propsForFileUpload.concern, acceptedFileTypes: state => state.uploader.propsForFileUpload.acceptedFileTypes, deleteString: state => state.uploader.propsForFileUpload.stringForDeleteMethod, uploadLabel: state => state.uploader.propsForFileUpload.uploaderLabel }) }, methods: { ...mapActions({ //youNeed fileUpload: 'uploader/ActionFileUpload', uploaderDialogTrigger: 'app/ActionUploaderDialog', fileDelete: 'uploader/uploaderFileDelete' }), //youNeed fileSelected (files) { if (files.length !== 0) { this.selectedFile = true } this.$store.commit('uploader/MutationFileSelected', files[0]) }, //youNeed fileRemoved () { this.selectedFile = false }, //youNeed upload () { this.fileUpload() }, deleteFile () { this.fileDelete() this.uploaderDialogTrigger(false) } } } </script>

      vuex

      // MUTATION export const MutationFileSelected = (state, payload) => { state.fileSelected = payload } //ACTION export const ActionFileUpload = (context) => { let uploaderProps = context.state.propsForFileUpload.concern let id = '' let uploadUrl = '' let uploaData = new FormData() if (uploaderProps === 'clubLogoUpload') { id = context.rootGetters['clubEdit/getterHomeClubId'] uploadUrl = 'homeclub/putLogo/' //youNeed uploaData.append('file', context.state.fileSelected) } //youNeed Vue.prototype.$axios.post(process.env.API + uploadUrl + id, uploaData, { headers: { 'Content-Type': undefined }, onUploadProgress: function (progressEvent) { let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total) context.commit('MutationOnUploadProgress', percentCompleted) } }) .then(function (response) { if (response.status === 200) { console.log(response) context.dispatch('app/ActionUploaderDialog', false, {root: true}) context.dispatch('ActionAfterFileUpload') if (context.rootGetters['language/statusCurrentLanguage'] === 'en') { Notify.create({ type: 'positive', icon: 'img:statics/icons/check.svg', color: 'positive', timeout: 1000, position: 'center', message: 'Yeah. File uploaded. Great Job!' }) } if (context.rootGetters['language/statusCurrentLanguage'] === 'zh') { Notify.create({ type: 'positive', icon: 'img:statics/icons/check.svg', color: 'positive', timeout: 1000, position: 'center', message: 'Yeah. File uploaded. Great Job! -ZH' }) } } }) .catch(function (error) { console.log(error) }) }

      I think there’s a lot of stuff you won’t need but I didn’t want to tear it up. This solution enables me to use axios’s features, which are for me are a bit easier to handle.

      I’ve prefixed the essential parts I assume you need with //youNeed

      If there is anyone who might have an idea to improve this solution, I’d be appreciated

      Hi… that doesn’t work… when I try formData.append it goes empty to backend… There is problem on this method. I think because of security reason it is not appendable… How did you run it?

    • valasek

      [Solved] Missing required prop: "value" found in ---> <QSelect>
      Help • • valasek

      4
      0
      Votes
      4
      Posts
      718
      Views

      valasek

      Thank you fixed using v-model option.