@IvanGV
GH = Git Hub
https://github.com/quasarframework/quasar/issues

@Shoooryuken
This is a common Vue error. You should never modify the props.
Instead create a computed property which returns options and on update emit an event to parent.

Something on the line of this:

<template>
    <q-card>
        <q-dialog square full-width v-model="$_options" position="bottom" class="">
            <q-card-section class="row items-center">
                <div class="text-h6">{{ title }}</div>
                <q-space />
                <q-btn icon="close" flat round dense @click="close" />
            </q-card-section>
        <q-card-section class="items-center no-wrap">....</q-card-section>
    </q-card>
</template>
<script>
export default {
    props: {
        options: { type: Boolean, default: false }
    },
    computed: {
        $_options: {
            get: function () {
                return this.options;
            },
            set: function (val) {
                this.$emit('update-options', val);
            }
        }
    },
    methods: {
       activate: function (el) {
            this.$emit('update-options', false)
            this.filter = el
        },
        close () {
            this.$emit('update-options', false)
        }
    }
}...

https://forum.vuejs.org/t/vue-warn-avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten-whenever-the-parent-component-re-renders/21757

@IvanGV btw there is a way of doing it if you are very keen : )
You have to create your own custom spinner component. There is a vague example here:
https://forum.quasar-framework.org/topic/4535/custome-spinner/3

@Clyde Remove the tag="label" and add clickable instead and it should work fine.
https://codepen.io/turigeza/pen/xxVoOxW

This should really be part of Quasar I feel and not an extension. I am going to start bodging the drag and drop today into qTable to start with and then qTree. And many will end up doing the same because sooner or later you will need it. How else are you supposed to organise a tree for example ? There is not many other ways to do it.

@bonatoc @Hawkeye64 I couldn’t agree more.

I was using yarn both globally and locally. Then two days ago I was following the upgrade guide to quasar 1.
https://v1.quasar-framework.org/start/upgrade-guide

And I could not get passed the line

module.exports = {
  presets: [
    '@quasar/babel-preset-app'
  ]
}

that is until switched to npm for global use. Why that is I have no idea : ) but now I have npm for global use and yarn for local / per project use.

Worth noting their suggestion:
6. We recommend yarn whenever possible because of its speed and efficient use. However, when using globals, we still recommend using npm, especially if you use nvm (Node Version Manager).

I would love not to have to deal with both.

is there a search in your docs? Perhaps I need new glasses, thanks

@adsaviation

Use Google site search
site:https://quasar-framework.org/ Autocomplete

https://www.google.com/search?q=site%3Ahttps%3A%2F%2Fquasar-framework.org%2F+Autocomplete&oq=site%3Ahttps%3A%2F%2Fquasar-framework.org%2F+Autocomplete&aqs=chrome..69i57j69i58.371j0j7&sourceid=chrome&ie=UTF-8

If you bookmark that search page all you have to do is retype the search keyword.

There is also the browser built in search I am sure you use it too. CTRL + F / CMD + F just to search the page. I use that a lot.

I love quasar too. I am not missing the search feature for the docs.

Yes ! Thank you for that link. No need for the mixins and also it is not $props I need but $attrs. Sorry it is kind of ended up to be a question about Vue rather then Quasar.

So the final wrapper QInput for me looks like this

<template>
    <q-input
    :value="value"
    v-on="$listeners"
    v-bind="$attrs"
    @keyup.enter="updated"
    @blur="updated"
    @keydown.meta.83.prevent="updated"
    />
</template>

<script>

export default {
    props: ['value'],
    methods: {
        updated: function () {
            this.$emit('save');
        }
    }
};
</script>
```

@ssuess
I think the rules :rules="['date']" will cause this to be added. This is where the error messages go. Which are position: fixed because of the animation I think.

Might be interesting to read
https://github.com/quasarframework/quasar/issues/3357

See also
https://v1.quasar-framework.org/vue-components/input
search for bottom-slots

@bonatoc @Hawkeye64 I couldn’t agree more.

https://forum.quasar-framework.org/topic/6960/quasar-with-vue-3

@piovezan-f
this.vehicleTypesOptions = response.data.data.data should be this.vehicleTypesOptionsDefault = response.data.data.data
and also
vehicleTypesOptionsDefault should be in data
like

data () {
    return {
      vehicleTypesOptions: [],
      vehicleTypesOptionsDefault: [],      
      state: false
    }

Please post a pen next time it is easier to trouble shoot like that.

@dsl101 You can load components dynamically at the time when you need it. I am not sure if this would help you but have a look at “Async Components” if you haven’t yet.
https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components/

Btw you say “Each component could share a single menu”. That doesn’t sound that bad to me. If there is a repetition going on and these menus more or less look the same only the items change within the menu that sound like good idea to me.

You can couple them back together something like this:

<the-component>
    <the-component-menus>
        <!-- contains all the menus this component has according to what is in the vuex state -->
        <a-component-menu for="menu in $store.state[component_name].menuitems" />
    </the-component-menus>
        
    <the-component-data>
        <!-- what ever the component displays -->
    </the-component-data>
<the-component>

I guess if I understand it correctly a similar situation could be a basic two column layout where the left side contains unique content to each page but the layout of the pages look identical.

Let’s say I have 1000’s of pages each fitting the same layout. I wouldn’t I want to repeat the layout in all the pages just because the content inside the left side unique to that page. I use the vuex state to control what appears in the left column of the layout.

@Clyde Remove the tag="label" and add clickable instead and it should work fine.
https://codepen.io/turigeza/pen/xxVoOxW

@CWoodman You are right.

Did you know there is a built in function for this?
https://pdanpdan.github.io/quasar-docs/vue-components/table#QTable-API
scrollTo

Sadly though no animation. And also I can not get the header not to cover the first row : ) Never mind … see if you can use it don’t have more time to spend on it just now. I don’t get why the sticky header covers the first element. The prop :virtual-scroll-sticky-start="100" should deal with this I thought.

https://codesandbox.io/s/scrolltest-with-list-and-table-forked-twgtu?file=/src/components/tabPanels/Table.vue:2078-2157

@CWoodman I guess the same idea as you were doing for the list.

@CWoodman In your code

Instead of
this.scrollToItem(this.itemRef)

You should
this.scrollToItem(this.itemRef.$el)

Then it works.
https://codesandbox.io/s/scrolltest-with-list-and-table-forked-twgtu?file=/src/components/tabPanels/List.vue:1073-1108

@CWoodman I can not do it on Code sandbox just now too small of screen I have … but here is basic example for scrolling to element with the native scrollIntoView
https://codepen.io/turigeza/pen/zYqQrwY

@ssuess Line 15 console.log(Quasar.utils.date.formatDate(value, 'x'))

Logs undefined. But only for certain dates! So there must be something wrong with that line.

Most likely formatDate expecting the American date format and here value is the British format.

Update:
https://codepen.io/turigeza/pen/yLOWYWx

const correct_date = Quasar.utils.date.extractDate(value, 'DD/MM/YYYY');