@studio511 you’re welcome

If you don’t want to use a scroll area you can do a dom search to get the scroll area inside your page, then you add a ref argument called ‘myScroll’ (if doesn’t exist yet), then do this after adding a new tree element (if the scroll exist) :

this.$refs.myScroll.setScrollPosition(999999)

Maybe it won’t work cause ref depending on Vue, then use a common Dom id to get the element.

But I don’t think dom manipulation works for mobile (maybe I’m wrong)

@RobbeV what about using a table inside virtual scroll ? It could solve the desktop problem, but change the mobile style.

@studio511 yeah I think using observers is the right way to do it !

Can you post your code of the dynamic q-tree replaced by dynamic lorem ipsum ?

Ps : after thinking 30 seconds, observer is an observer so no you can’t do it with it.

I have found the property scroll-target of the q-virtual-scroll.
Maybe you could dynamically create and id to the last html element and del the last one when you create a new tree element. Then scroll-target to it.
Or simply create an empty div/span with end id, but maybe it could create weird display.
Or you could using the last element of a class you created for it.

There’s also Scroll position

When I’ll be on my computer, I’ll try few stuff, that’s if you can share me the code it will be cool !

Hello,

I have an issue with a q-scroll-area containing <pre>data…</pre>, the behavior that I expect would be to automatically create an horizontal scroll bar when the text overflow in x.

Should I use the css’s property overflow-x: scroll ?
Is there an option in the q-scroll-area component that would allow this behavior ?

I have already tried horizontal option for q-scroll-area, but it remove the vertical scroll bar ; it is still possible to scroll with the mouse, but it is really painful for really long text to go directly on a desired scroll position.

<q-scroll-area visible>
    <div id="source-code">
        <pre>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida. Odio facilisis mauris sit amet massa vitae tortor condimentum. Ornare suspendisse sed nisi lacus. Fames ac turpis egestas maecenas pharetra convallis posuere. Adipiscing bibendum est ultricies integer quis. Commodo nulla facilisi nullam vehicula ipsum a arcu. Interdum varius sit amet mattis vulputate enim. Ac tincidunt vitae semper quis lectus nulla at volutpat. Enim blandit volutpat maecenas volutpat. Sed enim ut sem viverra aliquet eget sit. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Velit ut tortor pretium viverra suspendisse.
            </p>
        </pre>
        <p>
                  Eget est lorem ipsum dolor. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Purus in mollis nunc sed id semper. Id aliquet risus feugiat in ante metus dictum at. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Sed viverra ipsum nunc aliquet. Aliquam faucibus purus in massa tempor. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Nisi scelerisque eu ultrices vitae auctor. Euismod nisi porta lorem mollis aliquam ut porttitor. Faucibus turpis in eu mi. Lectus quam id leo in vitae turpis.
        </p>
    </div>
</q-scroll-area>

@tof06 thx, apparently I’m blind ><

@wolfiton

@JackyLee nice to know, je vais me coucher moins bête
1000:1000
UID:GID
1000 usually the first user/group
stackoverflow

@wolfiton you have put “standard” instead of “prettier”

prettier doc

ps :
eslintrc.js

module.exports = {
  ...
  extends: [
    "standard", // replace by prettier
  ]
  ...
]

I tried few stuff in an old project, maybe there are many things to improve, anyway I think it is interesting.

I store my token and get it with a login method
store/user/actions.js

import { axiosInstance } from 'boot/axios'
import JWT from 'jwt-client'

export function login ({ commit }, form) {
  console.log('action login')
  return axiosInstance.post('/login', { email: form.email, password: form.password })
    .then(response => {
      console.log('success login')
      let session = JWT.read(response.data.token)
      // console.log(response.data, session.claim.auth)
      commit('login', { token: response.data.token, refeshToken: response.data.refesh_token, user: response.data.user, authorization: session.claim.auth })
      setAxiosHeaders(response.data.token)
      return true
    })
    .catch((error) => {
      console.log('error login')
      // console.log(error.response.data)
      console.log(error)
      return false
    })
}

catch error to refresh token, maybe not the right way to do a refresh but the point is the concept
boot/axios.js

import axios from 'axios'
import { refreshToken } from '../store/user/getters';

const axiosInstance = axios.create({
  baseURL: 'https://0.0.0.0:5000'
   })
})

axiosInstance.interceptors.response.use((response) => { // intercept the global error
  return response
}, function (error) {
  let originalRequest = error.config
  if (error.response.status === 401 && !originalRequest._retry) { // if the error is 401 and hasent already been retried
    originalRequest._retry = true // now it can be retried 
    return axiosInstance.post('/users/token', null).then((data) => {
      return axiosInstance(originalRequest) // retry the request that errored out
    }).catch((error) => {
      for (let i = 0; i < error.response.data.errors.length; i++) {
        if (error.response.data.errors[i] === 'TOKEN-EXPIRED') {
          // refesh the token and try again
          refresh()
          return
        }
      }
    })
  }
  if (error.response.status === 404 && !originalRequest._retry) {
    originalRequest._retry = true
    window.location.href = '/'
    return
  }
  // Do something with response error
  return Promise.reject(error)
})

export default ({ Vue }) => {
  // for use inside Vue files through this.$axios
  Vue.prototype.$axios = axiosInstance
}

// Here we define a named export
// that we can later use inside .js files:
export { axiosInstance }