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

    input components with v-for

    Help
    2
    7
    162
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Z
      zeppelinexpress last edited by

      I did:

      <div v-for="n in fields" :key="n">
        <TextEditor class="col q-mr-sm q-mb-sm" :text="quotes[n]" />
        <TextEditor class="col q-ml-sm q-mb-sm" :text="asks[n]" />
      </div>
      

      component:

      <q-editor
          dense
          v-model="value"....
      

      bottom:

      props: {
          text: String
        },
        computed: {
          value: {
            get () {
              return this.text
            }
          }
        }
      

      everything I tried, it did not worked or returned error on log, like:
      [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “text”… when I tried to set text directly on v-model

      how can I set() or send the component input to my page, I don’t know if vuex is the better solution because my inputs are rendered dynamically.

      I 1 Reply Last reply Reply Quote 0
      • I
        Ilia @zeppelinexpress last edited by

        @zeppelinexpress You were close 🙂

        <div v-for="n in fields" :key="n">
          <TextEditor class="col q-mr-sm q-mb-sm" v-model="quotes[n]" />
          <TextEditor class="col q-ml-sm q-mb-sm" v-model="asks[n]" />
        </div>
        
        <q-editor
            dense
            :value="value"
            @input="input"
        
        props: {
            value: {
               type: String,
               required: true
            }
          },
          methods: {
            input () {
              this.$emit('input')
            }
          }
        
        1 Reply Last reply Reply Quote 1
        • I
          Ilia last edited by

          Please note that that error might still be appearing, meaning that you have passed these quotes and asks from somewhere else even above

          1 Reply Last reply Reply Quote 1
          • Z
            zeppelinexpress last edited by zeppelinexpress

            @Ilia thank youu!! but still don’t work, when I write something, this msg appears:
            Invalid prop: type check failed for prop “value”. Expected String with value “undefined”, got Undefined

            I 1 Reply Last reply Reply Quote 0
            • I
              Ilia @zeppelinexpress last edited by Ilia

              @zeppelinexpress That is most likely because you do not have quotes or asks with that index ‘n’ at the moment of creating. So, generally, these arrays should have exactly the same number of elements, as fields array.

              1 Reply Last reply Reply Quote 1
              • Z
                zeppelinexpress last edited by zeppelinexpress

                I did some tests and still not working, I tried with static index “not ‘n’”, my problem is passing values from child components, I tried somethings unsuccessfully and reading some docs atm 🙂

                my page:

                <TextEditor class="col q-ml-sm q-mb-sm" v-model="test" />
                
                data () {
                    return {
                      test: ''
                

                component:

                <q-editor
                    dense
                    :value="value"
                    @input="input"
                
                props: {
                    value: {
                      type: String,
                      required: true
                    }
                  },
                  methods: {
                    input () {
                      this.$emit('input')
                    }
                  }
                
                

                return: Invalid prop: type check failed for prop “value”. Expected String with value “undefined”, got Undefined

                I feel like I’m forgetting something…
                all I need is hold what user write on variable test

                1 Reply Last reply Reply Quote 0
                • Z
                  zeppelinexpress last edited by zeppelinexpress

                  I succeeded in an alternative way, but if you tell me what I forgot up there, thank you, for didactic purposes! 🙂

                  the way I solved:

                  <q-editor
                      dense
                      v-model="inputVal"......
                  
                  props: {
                      value: {
                        type: String,
                        required: true
                      }
                    },
                    computed: {
                      inputVal: {
                        get () {
                          return this.value
                        },
                        set (val) {
                          this.$emit('input', val)
                        }
                      }
                    }
                  

                  Thanks for all the help and care =**

                  1 Reply Last reply Reply Quote 1
                  • First post
                    Last post