Hi @jraez
I found a solution of extending templates by using https://github.com/mrodal/vue-inheritance-loader
This solution keeps the template syntax. The root dialog component now looks like:

<template extendable>
    <q-dialog v-model="visible">
      <q-card>
        <q-card-section>
          <div class="text-h6">Title</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <extension-point></extension-point>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="OK" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
</template>

<script>

export default {
  name: 'DialogWithSlot',

  data () {
    return {
      visible: false
    }
  },
  methods: {
    showMessage () {
      this.visible = true
    }
  }
}
</script>

and the child dialog looks like:

<template extends="components/DialogWithSlot.vue">
   <extensions>
    <extension>
      {{messageProp}}
    </extension>
  </extensions>
</template>

<script>
import DialogWithSlot from 'components/DialogWithSlot.vue'

export default {
  name: 'DialogWithSlotImpl',

  extends: DialogWithSlot,

  props: ['messageProp'],

  data () {
    return {
    }
  }
}
</script>

Looks very easy and straight forward to me.

Hi @jraez ,

Your solution does show the dialog. But its content (the message) is missing. So it does not work

Hi @jraez ,

Thanks for your help! I have tried it, but it is still broken.
I didn’t like the dialog plugin approach, so have recreated a similar topic with a different approach: https://forum.quasar-framework.org/topic/5541/how-to-extend-a-dialog

Perhaps you can look into this?

Hi,

I want to extend a custom dialog component with a slot for its content.
Therefore I have created this DialogWithSlot.vue:

<template>
  <q-dialog v-model="visible">
    <q-card>
      <q-card-section>
        <div class="text-h6">Title</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <slot></slot>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="OK" color="primary" v-close-popup/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name: 'DialogWithSlot',

  data() {
    return {
      visible: false
    }
  },
  methods: {
    showMessage() {
      this.visible = true
    }
  }
}
</script>

Using this dialog can be done using

<template>
  <q-page class="flex flex-center">
    <!--
      This dialog 'dialog-with-slot' approach works, but I want to move it to a seperate component
    -->
    <q-btn label="dialog with slot works" @click="openMessage('this is a message')"/>
    <dialog-with-slot ref="dlg">{{message}}</dialog-with-slot>
  </q-page>
</template>

<script>
import DialogWithSlot from 'components/DialogWithSlot.vue'

export default {
  name: 'PageInput',

  data() {
    return {
      message: false
    }
  },
  methods: {
    openMessage(msg) {
      this.message = msg
      this.$refs.dlg.showMessage()
    }
  },
  components: {
    DialogWithSlot
  }
}
</script>

But now I want to have it in a seperated component file. So I have created this DialogWithSlotImpl.vue:

<template>
  <dialog-with-slot>{{messageProp}}</dialog-with-slot>
</template>

<script>
import DialogWithSlot from 'components/DialogWithSlot.vue'

export default {
  name: 'DialogWithSlotImpl',

  extends: DialogWithSlot,

  props: ['messageProp'],

  data() {
    return {}
  },
  components: {
    DialogWithSlot
  }
}
</script>

and use it like this:

<template>
  <q-page class="flex flex-center">
    <!--
      This dialog 'dialog-with-slot-impl' approach don't work,
      How can I access the method (showMessage())
    -->
    <q-btn
      label="dialog with slot impl don't work"
      @click="openMessageImpl('this is yet another message')"
    />
    <dialog-with-slot-impl ref="implDlg" :messageProp="message"/>
  </q-page>
</template>

<script>
import DialogWithSlotImpl from 'components/DialogWithSlotImpl.vue'

export default {
  name: 'PageInput',

  data() {
    return {
      message: false
    }
  },
  methods: {
    openMessageImpl(msg) {
      this.message = msg
      this.$refs.implDlg.showMessage()
    }
  },
  components: {
    DialogWithSlotImpl
  }
}
</script>

But this don’t work. The method showMessage() don’t get called.

A complete codesandbox can be found here.
https://codesandbox.io/s/extending-dialog-6mniu

Somebody any idea’s

Hi,

Thanks for you idea’s. I have tried to implement it by adding a new UserDialog3.vue in the codesandbox https://codesandbox.io/s/reusable-dialog-component-nkdfn

This generates an error: Component template requires a root element, rather than just text.
Googling about this error I find out pug might be installed. So I have tried to install it following this document: https://quasar.dev/quasar-cli/cli-documentation/handling-webpack#Pug
I have runed the command yarn add --dev pug pug-plain-loader

and changed the build section in quasar.conf.js :

    build: {
      scopeHoisting: true,
      vueRouterMode: 'history',
      extendWebpack (cfg) {
        cfg.module.rules.push({
          test: /\.pug$/,
          loader: 'pug-plain-loader'
        }),
        chainWebpack (chain) {
          chain.module.rule('pug')
            .test(/\.pug$/)
            .use('pug-plain-loader')
              .loader('pug-plain-loader')
        }        
      }      
    },

Now I keep getting a 502 error: 502 Bad Gateway. We had trouble connecting to the server, try restarting it or check the logs to see what happened.
I have tried to remove the pug settings from the quasar.conf.js, but this does not work. I cannot find the log either.

Any idea’s?

Hi,

I would like to create a default parent component from a QDialog. I have created a component/DefaultDialog.vue:

<template>
  <q-dialog ref="defaultDialog" @hide="onDialogHide">
    <q-card>
      <q-card-section class="row text-white bg-primary q-pa-sm">
        <div class="text-h6 q-pl-sm">{{title}}</div>
        <q-space/>
        <q-btn v-close-popup flat round dense icon="close"/>
      </q-card-section>

      <form @submit.prevent="saveForm">
        <q-card-section>
          <!-- dynamic section.. I want to use slots to fill this section -->
          <slot></slot>
        </q-card-section>

        <q-card-actions align="right" class="inset-shadow q-pr-md">
          <q-btn label="Save" color="primary" type="submit"/>
        </q-card-actions>
      </form>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name: 'DefaultDialog',

  props: ['title'],

  methods: {
    show() {
      this.$refs.defaultDialog.show()
    },
    hide() {
      this.$refs.defaultDialog.hide()
    },
    onDialogHide() {
      this.$emit('hide')
    },
    saveForm() {
      this.$emit('saveForm')
    }
  }
}
</script>

Now I want to use it and tried this ‘components/UserDialog2.vue’:

<template>
  <default-dialog>
    <q-input outlined label="Name"/>
  </default-dialog>
</template>

<script>
import DefaultDialog from 'components/DefaultDialog'

export default {
  mixins: [DefaultDialog],
  components: {
    DefaultDialog
  }
}
</script>

I want to open the dialog using:

this.$q.dialog({
   component: UserDialog2,
   parent: this
})

When its opened the input is not shown.
I have created a full codesandbox app: https://codesandbox.io/s/reusable-dialog-component-nkdfn
Here you can find: components/UserDialog.vue

I want to split the dialog part so I can reuse it.
Therefore I have create components/UserDialog2.vue. this uses components/DefaultDialog.vue
I think I am almost there but something went wrong. There comes an error: ‘Error in mounted hook: “TypeError: this.$refs.defaultDialog is undefined”’

Does anybody have got a idea?
Thanks!

Hi @cmanique ,

Thanks for pointing me to the computedRows property. I changed it by using the array map prototype.
This works well after filtering and sorting .

  scrollTo: function () {
      const index = this.$refs.table.computedRows.map(e => e.index).indexOf(15)
      this.$refs.table.scrollTo(index)
    }

I am also pretty new with vue, quasar and javascript. So if any body has got some improvements, I would like to know it.

Hi,

I have got a table which can be sorted. I want to know how I can find the row index of a row after sorting so I can pass it to the scrollTo method.
I have made a codepen sample to show the problem.
Just run the sample and press the scroll to button.
https://codepen.io/olafxso/pen/eYNydPR

After that you will see it scrolls to row ‘15 jelly bean’. (it is know the last visible row in the table)

Then sort the column Calories by clicking on the column header.
The hit the button again. You will see it scrolls to row ‘51 Ice cream sandwhich’

Well I would like to know how to scrollto row 15 after sorting a table column.

Thanks for any idea’s!

hi @Pratik-Patel

Thanks for your solution. There is one issue now.
I actually have got a full height table with a fixed header. I have add the css for that in you codepen approach.

I have update the scrollto method to jump to row 60.
When you scroll down beyond row 60 and press the button it scrolls to row 61. Row 60 is behind the table header.

It also does not update the table repaints correct. The table has got some blurred lines. Scroll to row 0. Then press to the button. You will see it jumps to row 60 as last row, but the first 4 rows are blurred.

Do you (or somebody else) have got an idea how to fix this?

somebody any idea’s?

@muffin_mclay
I changed it by use v-model instead of :value. This works now, but I don’t understand it completely. I thought you need to use :value to bind a input to a prop, but when you use an object it doesn’t. Strange isn’t it?

Here is my code now:

<!--
caller uses this method to set the 'treat'
<treats-object-editor :treat="selectedTreat"/> 
-->
<template>
  <q-card-section class="q-gutter-sm">
    <div class="text-h6">Object in props</div>
    <div class="text-h6">Use v-model to edit field of Object</div>
    <q-input outlined v-model="treat.name" label="Name"/>
    <q-input outlined v-model="treat.calories" label="Calories"/>
  </q-card-section>
</template>
<script>
export default {
  props: {
    treat: Object
  }
}
</script>

I did not saw your changes. Did you might have forked my project and made the changes there?

I have tried to change the TreatsObjectEditor.vue like you suggest above, but still got the same error.

FYI: The editors are not visible on the browser preview, due to the error. The editors which are visible are from the ‘named props’ variant.
You suugested me to change the use to:
<treats-named-editor :value=selectedTreat v-model=selectedTreat />
I had changed it to the ‘treats-object-editor’ tag I made for:
<treats-object-editor :value=selectedTreat v-model=selectedTreat />

@muffin_mclay I have tried your solution, but it gives an error: [Vue warn]: Error in render: “TypeError: _vm.local is undefined”

You can see the updates and try it by editing the codesandbox project, or can’t you?

@Hawkeye64
Thanks for your idea, but it does not work. I don’t see how it is binded to the prop['treat'] either.
I was looking for a solution for the second template, the first one works, but I would like to pass an object instead of all the fields.

Hi,

I would like to pass an object as a property, but when I do that it looses the reactivity.
I have got a template like this:

<template>
  <q-card-section class="q-gutter-sm">
    <div class="text-h6">Fieldnames in props</div>
    <q-input outlined :value="name" @input="$emit('update:name', $event)" label="Name"/>
    <q-input outlined :value="calories" @input="$emit('update:calories', $event)" label="Calories"/>
  </q-card-section>
</template>

<script>
export default {
  props: ['name', 'calories']
}
</script>

and use it like this:

<treats-named-editor :name.sync="selectedTreat.name" :calories.sync="selectedTreat.calories" />

I don’t like to pass all the fields as props, so tried to change it as follows (TreatsObjectEditor.vue):

<template>
  <q-card-section class="q-gutter-sm">
    <div class="text-h6">Object in props</div>
    <q-input outlined :value="treat.name" @input="$emit('update:treat.name', $event)" label="Name"/>
    <q-input outlined :value="treat.calories" @input="$emit('update:treat.calories', $event)" label="Calories"
    />
  </q-card-section>
</template>

<script>
export default {
  props: ['treat']
}
</script>

and use it like this:

<treats-object-editor :treat.sync="selectedTreat"/>

The editor is located next to the table. The selectedTreat gets its value when a row in a table is selected.
Both templates gets updated. The values of the selectedTreat is shown in the editors, but when You try to edit the second ‘Object in props’ template, then the value doesn’t go to the selectedTreat. It also gets lost when the editor looses the focus.

Is it possible to pass an object like this way?

A complete test app can be found here:
https://codesandbox.io/s/cocky-hopper-vcyen

Hi,

I found a solution. I had to change @input="$emit('input',$event.target.value)" into @input="$emit('input', $event)"

Hi,

I would like to build dynamic forms like is show here : https://codesandbox.io/s/github/e-schultz/vue-dynamic-components/tree/master/?initialpath=%2Fdemo-5&module=%2Fsrc%2Fcomponents%2FDemoFive.vue

There is TextInput template for a name field like this:

<template>
  <div>
    <label>{{label}}</label>

    <input type="text"
           :name="name"
           :value="value"
           @input="$emit('input',$event.target.value)"
           :placeholder="placeholder
           ">
          {{value}} <!-- I have add this to show the problem -->
  </div>
</template>
<script>
export default {
  name: 'TextInput',
  props: ['placeholder', 'label', 'name', 'value']
}
</script>

When you type something in the name field its value is printed-out directly via the {{value}}.

It is not printing any more when I change it to a q-input like this:

<template>
  <div>
    <label>{{label}}</label>

    <q-input type="text"
          outlined
           :name="name"
           :value="value"
           @input="$emit('input',$event.target.value)"
           :placeholder="placeholder
           "/>
           {{value}}
  </div>
</template>
<script>
export default {
  name: 'TextInput',
  props: ['placeholder', 'label', 'name', 'value']
}
</script>

Also when the focus is lost of the editor it set back the value where it is starts.

Is this a bug or how can I make this work?

Hi,

I would like to test something using the codesandbox, but when I start it there comes an error (502: Bad Gateway) and it does not work.

https://codesandbox.io/s/github/quasarframework/quasar-codesandbox

Any idea’s?

Hi,

After adding an item to a table I want to jump to that row.
I have tried to use the scrollTo method, like described in the QTableAPI, but I don’t get it working.

I think it should work when you there is a table with a ref in the template like this:

<q-table ref="table">

Jumping to row 9 of a table from a script method must be done by this:

this.$refs.table.scrollTo(9)

But this does not work.

I have made I codepen app to show my approach. https://codepen.io/olafxso/pen/gOpmvZJ

Any idea’s what I am doing wrong?

Hi,

After adding an item to a table I want to jump to that row.
I have tried to use the scrollTo method, like described in the QTableAPI, but I don’t get it working.

I think it should work when you there is a table with a ref in the template like this:

<q-table ref="table">

Jumping to row 9 of a table from a script method must be done by this:

this.$refs.table.scrollTo(9)

But this does not work.

I have made I codepen app to show my approach. https://codepen.io/olafxso/pen/gOpmvZJ

Any idea’s what I am doing wrong?