D
@metalsadman Below is my render code (will render any quasar form component based on a passed object of settings/properties)
if I set the value under .props it works
sc.props.value = this.values[key] || sc.default ||
if I set the value under .domProps it fails (value is missing)
sc.domProps.value = this.values[key] || sc.default ||
[Vue warn]: Missing required prop: "value"
found in
---> <QSelect>
<QForm> at src/components/Form.vue
<QPage>
<Config> at src/pages/config/Config.vue
<QPageContainer>
<QLayout>
<Default> at src/layouts/default.vue
<App> at src/App.vue
<Root>
All I can figure is that creating a q-input component instance in this way requires the value to be in .props because I am creating the “html” in code not directly rendering a “raw” tag (e.g. input). Since I can’t use v-model in the render function I must set value and that (in the html tag) is in props (as there is no such thing as domProps in an html element).
well…it’s all good. Maybe now I grok the difference between rendering an instance of a component and rendering a html tag directly
makeElement (element, key) {
return element(
this.cSchema[key].type ? `q-${this.cSchema[key].type}` : 'q-input',
this.makeElementOptions(this.cSchema[key], key),
[this.tooltip(this.cSchema[key].tip, element)]
)
},
makeElementOptions (sc, key) {
// https://alligator.io/vuejs/introduction-render-functions/
// https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
if (!sc.props) sc.props = {}
sc.props.value = this.values[key] || sc.default || '' // TODO set based on valueType
console.log('setting value', key, this.values[key])
let options = {
class: sc.class ? sc.class.concat(' ', sc.type) : null, // TODO accept array or object
attrs: sc.attrs,
style: sc.style,
props: sc.props,
domProps: sc.domProps,
on: { // events
input: (value) => {
console.log('input changed', key, value, this.values[key], sc.type)
if (sc.type === 'checkbox') value = !this.values[key]
let patch = { _id: this.values['_id'], [key]: value }
if (sc.type === 'select') this.updateSelect(key, value)
if (sc.affectsOptionSets) {
// console.log('emitting options update with patch', sc.affectsOptionSets)
patch._affectsOptionSets = sc.affectsOptionSets
}
this.$emit('changed', patch)
}
}
}
console.log('options for element', key, options)
return options
},
