input components with v-for
-
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-modelhow 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.
-
@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') } }
-
Please note that that error might still be appearing, meaning that you have passed these quotes and asks from somewhere else even above
-
@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 -
@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.
-
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 -
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 =**