No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. chyde90
    C
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 59
    • Best 7
    • Groups 0

    chyde90

    @chyde90

    7
    Reputation
    47
    Profile views
    59
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Website about:blank

    chyde90 Follow

    Best posts made by chyde90

    • RE: qTable with select all and pagination

      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;
          }
      }
      
      posted in Help
      C
      chyde90
    • RE: Razvan is taking some time off

      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!

      posted in Announcements
      C
      chyde90
    • RE: [v1] slide-left/slide-right transition easing

      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

      posted in Framework
      C
      chyde90
    • RE: Axios interceptor and router push not working

      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`
          }
          // ...
        });
      }
      
      posted in Help
      C
      chyde90
    • RE: [SOLVED] Table component not updating when data added dynamically

      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.

      posted in Framework
      C
      chyde90
    • RE: Dynamic state disable q-select BUT disable options individually

      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' }
              ];
          }
      }
      
      posted in Framework
      C
      chyde90
    • RE: q-table with reactive i18n translations for columns name

      Making columns a computed property should do the trick

      posted in Framework
      C
      chyde90

    Latest posts made by chyde90

    • RE: Razvan is taking some time off

      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!

      posted in Announcements
      C
      chyde90
    • RE: Announcing Quasar.Conf - The first Quasar Community Conference!

      Awesome! Looking forward to it! 😃

      posted in Announcements
      C
      chyde90
    • RE: Axios interceptor and router push not working

      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`
          }
          // ...
        });
      }
      
      posted in Help
      C
      chyde90
    • RE: Is there a dark mode version for $primary, $secondary, $accent in SCSS?

      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

      posted in Help
      C
      chyde90
    • RE: qTable with select all and pagination

      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;
          }
      }
      
      posted in Help
      C
      chyde90
    • RE: How to handle await/promise of async websocket object?

      @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?

      posted in Help
      C
      chyde90
    • RE: How can I populate my data from an array in another method?

      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.

      posted in Help
      C
      chyde90
    • RE: How can I populate my data from an array in another method?

      @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.

      posted in Help
      C
      chyde90
    • RE: q-tree - issues with ticked nodes

      (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
      posted in Help
      C
      chyde90
    • RE: How can I populate my data from an array in another method?

      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({ ... })
      
      posted in Help
      C
      chyde90