Making columns a computed property should do the trick

Man, that sounds serious Thank you for telling us.
I hope he takes as much time as he needs so that he gets well soon!

With “select all icon” you mean the checkbox in the table head that appears when you set selection="multiple" on the QTable, right?
I don’t know how to modify that, but you could use an external button and set the selected property to your whole table data array.

<q-table
    :data="tableData"
    selection="multiple"
    :selected.sync="selected"
    ....
</q-table>

<q-btn label="click me" @click="buttonClicked" />

{
    buttonClicked() {
        this.selected = this.tableData;
    }
}

You are right, there is indeed not much difference at for this animation duration.

I have now tried out a few options and I came to the conclusion that it definitely should be easeOutCubic (see https://easings.net/de#easeOutCubic ). At least in my opinion.

I have made a little demonstration: https://jsfiddle.net/uvz4gam3/ (don’t look at the code; only consider the result window)
There you can see (when you switch the tabs) some different easing curves:

• The red one is the original (before your commit)
• The orange one is the change you have made (looks the same)
• And the blue one is the one I think looks the best

If you would change the default transition to that, I would be super happy

Does it work? What @jraez said should help.

If you really want to use the router, you can do that, too.
The code you showed is in a boot file, right? So I think your this.$router.push('/login') call doesn’t work because this.$router is not defined. Normally, you write that in a Vue component, where this refers to the component - but you are in a boot file.

This is how you can do it:

import axios from "axios"

export default ({ Vue, router }) => { // <-------- This is where the `router` comes from
  Vue.prototype.$axios = axios;

  // ... (your request interceptor here)

  axios.interceptors.response.use(response => {
    return response;
  }, error => {
    if (error.response.status === 401) {
      // ...
      router.push("/login"); // <----  note there is no `this`
    }
    // ...
  });
}

This is not a problem with QTable, but with Vue’s reactivity system.
Its a common pitfall and thankfully this will be improved when Vue 3.0 comes out (I think).

You can read about it here: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

The example in the link deals with exactly your problem: You initialize your objects in this.prefixes as objects having the properties timelines and prefix, so they are reactive automatically (that is Vue sets up it’s change-detection-system for them).
Then you assign a new property rpki using this.prefixes[key].rpki = '1' – this is not reactive in Vue 2.x !! So when you change that property later, Vue doesn’t notice it.

One way to solve your problem is by explicitly telling Vue that your objects have a new property. For this, Vue provides an alternative way of assigning values to object properties:

In refreshAPwidget(), replace

this.prefixes[key].rpki = '1'

with:

this.$set(this.prefixes[key], 'rpki', '1')

On a similar note, it is better to write this.$delete(this.prefixes[key], 'timelines') instead of delete this.prefixes[key].timelines, but this doesn’t affect your example.

The columns object doesn’t need to be static.
You can always modify it or generate it dynamically, for example as a computed property.

Maybe this will give you an idea:

computed: {
  columns() {
    return this.columnNamesFromCsv.map(columnName => {
      return {
        name: columnName,
        label: columnName,
        align: "left",
        sortable: true,
        field: row => row[columnName]
      };
    });
  }
}

Note that the field attribute is a function to extract the cell value from the row.

I’m assuming you parse the CSV into a Javascript object.
This all depends on how your data looks, of course.

Yes. If you write your options array as a computed property, you can do this:

computed: {
    options() {
        return [
            { label: 'Google', value: 'GOOGLE' },
            { label: 'Facebook', value: 'FACEBOOK' },
            { label: 'Twitter', value: 'TWITTER' },
            { label: 'Apple', value: 'APPLE', disable: this.selected === 'GOOGLE' },
            { label: 'Oracle', value: 'ORACLE' }
        ];
    }
}

You could add rows="1000" (or another large number) to the q-input.
It is not exactly 100%, but it’s 100% with a maximum number of rows. I think that’s ok because a text-area with this many lines doesn’t make much sense anyways.

Seems a bit like a hack, though… so I don’t know if some browsers maybe handle this differently. Maybe it would be wise to set overflow: hidden on the container as well - just to be safe.

Man, that sounds serious Thank you for telling us.
I hope he takes as much time as he needs so that he gets well soon!

Awesome! Looking forward to it!

Does it work? What @jraez said should help.

If you really want to use the router, you can do that, too.
The code you showed is in a boot file, right? So I think your this.$router.push('/login') call doesn’t work because this.$router is not defined. Normally, you write that in a Vue component, where this refers to the component - but you are in a boot file.

This is how you can do it:

import axios from "axios"

export default ({ Vue, router }) => { // <-------- This is where the `router` comes from
  Vue.prototype.$axios = axios;

  // ... (your request interceptor here)

  axios.interceptors.response.use(response => {
    return response;
  }, error => {
    if (error.response.status === 401) {
      // ...
      router.push("/login"); // <----  note there is no `this`
    }
    // ...
  });
}

I’m facing the same problem. Company color is a dark brown… :|

My solution is: When I toggle darkmode on/off, I overwrite the colors using setBrand("primary", colorBasedOnDarkmodeSetting) and so on

The function is described here: https://quasar.dev/quasar-utils/color-utils

With “select all icon” you mean the checkbox in the table head that appears when you set selection="multiple" on the QTable, right?
I don’t know how to modify that, but you could use an external button and set the selected property to your whole table data array.

<q-table
    :data="tableData"
    selection="multiple"
    :selected.sync="selected"
    ....
</q-table>

<q-btn label="click me" @click="buttonClicked" />

{
    buttonClicked() {
        this.selected = this.tableData;
    }
}

@MKramer said in How to handle await/promise of async websocket object?:

The port of that server can change, so I created a global variable (which is defined in index.template.html, so it does not get renamed by the build process)

I’m afraid I don’t understand. What do you mean with getting renamed by the build process?

Why is your port number not available upon app start? Does it change over time or something?

Of course, the frontend somehow needs to know what port number the backend is running on and so on. But normally, it doesn’t need to wait for it… it should know value right away, for example using an environment variable.
Why do you need it to be asynchonous?

No need for async await.

In getReminder() replace:

documentClient.scan(params, function(err, data) {
   ...

With:

documentClient.scan(params, (err, data) => {
   ...

The difference is, that in a function using the function keyword, this has a different meaning as in a function using the arrow syntax.
You just discovered why arrow functions are so great – everything inside works as one would expect

If you are interested in more details, here is an article about it: https://medium.com/free-code-camp/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881#.59q9th108

That should solve your error. You’ll see, everything with the iteration and with how you are using .push() is fine.

@felice The error tells you that you are calling the .push function on something that is undefined. You don’t need a workaround, you need to call the function on the right object (that is, the array)

You were on the right track, it should work the way you did, except with .push instead of re-assigning a value to the property (what I said above).

Seems like there is some other problem with your code, but I can’t do much with what you showed us.

(3): Disabling expansion could be achieved with the following:

<q-tree
   ...
   :expanded.sync="expanded"
>

computed: {
    expanded: {
        get() {
            // return all keys
        },
        set(value) {
            // do noting
        }
    }
}

For the other points: It sounds like you are describing the “strict” tick-strategy with the following adjustment:

• When a node it ticked, tick all parent nodes up to the root node
  You could implement that in a watcher on the ticked property

In the code snippet that you provided, you are not using the .push method. In each iteration you are overwriting tableData with a single object.
Push is used like this:

this.tableData.push({ ... })