In render option value prop not accepted under domProps

[dgk]

can @rstoenescu or someone comment on my post here in vuejs forum

https://forum.vuejs.org/t/in-render-option-value-prop-not-accepted-under-domprops/74975

Do quasar components accept value prop only in props and not in domProps as documented in Vuejs. I see value listed in the input component props api but this is NOT the way vuejs accepts prop by default. So why the change?

[metalsadman]

you use domprops for native html elements afaik. so if you are extending a quasar/vue component then you will use props to pass the value. the one you sited in your vuejs forum post, here https://vuejs.org/v2/guide/render-function.html#v-model and in alligator are same usage, they use domProps since input element is native html.

[dgk]

Ok so quasar framework has overridden the “native” setup and moved the location of that property value.

That’s fine just confusing as I was learning to render my own components and all the docs and tutorials are for ‘native’. The only clue was looking a the api section and seeing value under props.

There is no using the render function section in the docs section for quasar. Maybe there should be especially if there are other exceptions to native.

[metalsadman]

@dgk nothing has been overridden, native is native (as far as i can see), some if not most quasar components uses html elements, ie QInput uses inner native html input or textarea based on the props passed.
sample snippet from QInput.js where domProps is used:

return h(this.isTextarea === true ? 'textarea' : 'input', {
        ref: 'input',
        staticClass: 'q-field__native q-placeholder',
        style: this.inputStyle,
        class: this.inputClass,
        attrs,
        on,
        domProps: this.type !== 'file' // this is the example usage you were looking for domProps:{value:''}
          ? {
            value: this.hasOwnProperty('tempValue') === true
              ? this.tempValue
              : this.innerValue
          }
          : null
      })

about render function, it should be left for the devland imho since it’s subjective and not the scope of the framework, if you want to learn how to use it, you have the vue js docs, and can also look into quasar repo as an example on how they implement their components using it.

[dgk]

@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
    },