v-money in input



  • I’m using v-money in quasar input, it turns out that when I try to change the value of the model on a click of the button, the value is not changed in the quasar component! In a normal input the change is made normally.



  • Quasar components (QInput, etc) are literally Vue components, not html elements as many seem to think. As such, you have to treat them a bit differently. If you can paste a snippet or link to a fiddle of your code that show the components/elements and what your button click does, we can to help get it working for you. You’ll likely need to manually do similar to what v-model does automatically and instead use events to get and set the value.



  • Can you give me an example?



  • Paste your current code as requested so we have apples to apples.



  • I have the input

    <q-field>
    <q-input v-model=“notaItem.objeto.attributes.qCom” type=“text” stack-label=“Qtd” v-money=“money”/>
    </q-field>

    It’s simple, in any method I try to execute

    this.notaItem.objeto.attributes.qCom = ‘1,000’

    but nothing happens to the value shown in the input



  • Is there a data object or computed property for notaItem.objeto.attributes.qCom> Or least for notaItem and if only this, is it a JS object? That is why I asked for your code (twice now), obviously you are using an input but how are all the other pieces glued together?



  • This post is deleted!


  • Yes, notaItem is simply a JS object



  • Why can’t you just paste your code or make a fiddle? Then we don’t have to play 20 questions. Is it a JS object on the data function, in the store, computed, or other? What about the method to set it? If you cannot provide some detail, I am not going to spend more time trying to help.



  • my code is too long, I’ll only put the piece

    data ()  {
        return {
          notaItem: {
            objeto: {
              type: 'nota_item',
              attributes: {
                qCom: 0
              }
            }
          }
        }
      }
    
    
    methods: {
      selectItem () {
          this.notaItem.objeto.attributes.qCom = 10
        }
    }
    


  • If you put triple backticks (```) at the top and bottom of your code in this forum, it will format it and it will be much easier to read. Also, you cannot update an object directly, you have to either use Vue’s $set or a JS objectAssign (or something similar). Last but not least, If you read the v-money docs, they state that you MUST use lazy if using it as a directive. Vue does not support lazy on components (yet). You really may want to take a base JS and/or Vue course before trying to use Quasar.



  • Also some additional advice. If you code and expect help outside of your own team (who speak a different language than English), you should write your code purely in English too. Your current example is understandable, but it could be that context gets lost with naming in a foreign language, which hinders others trying to help you/ your team. 😄

    Scott