input components with v-for

zeppelinexpress

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.

Ilia

@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')
    }
  }

Ilia

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

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

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.

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

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 =**

No More Posting New Topics!

input components with v-for