Reactive properties issue with vue.js

Question

I have run into a baffling issue with reactive properties in a Vue.js app, which probably results from a misunderstanding on my part and I hope someone can help. In my App.vue, I have import auth from 'src/auth.js', and in my data properties I have this:

 data() {
  return {
    authenticated: auth.user.authenticated,
    role: auth.user.role
  }
 },

This authenticated property is used to show or hide various menu items, e.g:

<li v-if="!authenticated">
  <router-link to="/login">Log In</router-link>
</li>
<li v-if="authenticated"><a href="#" @click.prevent="logout">Log Out</a></li>

What I'm finding is that changes to 'auth.user.authenticated' (e.g., switching from false to true after a successful login) are not being reflected in the rendering of the menu items - that is, the authenticated data property is not being updated. To do so, I have to explicitly update it in 'beforeUpdate' and the logout method, with this.authenticated=auth.user.authenticated. At first I thought it was simply that this was assigned on first creation and not subsequently updated and that if I used a computed property instead, this would be dynamic, but that doesn't do the job either. Clearly my App component is unaware of changes to the 'auth' data. How can I make things so that updating is automatic? I have it working at present but the use of 'beforeUpdate' feels like a kludge.

try making authenticated a computed property that returns auth.user.authenticated — thanksd
– thanksd, Commented Mar 10, 2017 at 21:59
thanksd, I did say above that I'd tried using a computer property. But I must have been doing something else wrong, because I just tried again in response to your comment and now I find it works! — John Moore
– John Moore, Commented Mar 10, 2017 at 22:09
Spoke too soon, in fact. The computed property approach does not work (I thought it did because npm run dev hadn't compiled the changed component - it sometimes does that - and I was still seeing the old version in effect). Roy J, what do you mean by 'Is auth something that is non-Vue'? — John Moore
– John Moore, Commented Mar 10, 2017 at 22:21
Is auth a Vue component, or some object that is not created or managed by Vue? — Roy J
– Roy J, Commented Mar 10, 2017 at 22:30

tony19 · Accepted Answer · 2022-07-16 01:05:43Z

1

Vue data items are reactive, but non-Vue data items are not reactive. Your code initializes a reactive data item with the value from a non-reactive one.

There is no way for Vue to watch external (to Vue) variables for changes. You will need to notice when your variable changes and tell Vue about it, or just use the external variable (instead of an internal copy) when you need it.

edited Jul 16, 2022 at 1:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 10, 2017 at 22:48

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Moore Over a year ago

Thanks for clarifying my thinking on this. What I've now done is to store the credentials in a Vuex store on login and logout, and I access this store from a computed property in App. This feels a lot more Vue-y to me than what I had before.

Collectives™ on Stack Overflow

Reactive properties issue with vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related