I’m using vue-js-toggle-button plugin and I’m wondering how I can change state of unchecked: 'OFF' and checked: 'ON' to stay @change . So when I turn it on it stays on even when I exit the page and return. Addtitonally, when I change from OFF to ON I want working to pass in params as true and when I change to OFF I want working: false
<toggle-button :value="false" @change="postHeight"
v-bind:labels="{unchecked: 'OFF', checked: 'ON'}"/>
<script>
methods:{
postHeight: async function() {
try {
const res = await axios.post(url, {
type: 'height', working: //true if switched to ON, false if OFF,
}).then(res => res.data);
} catch (err) {
alert("can't post");
};
},
}
I am much into vue but haven’t used this component. Here my takes:
Sorry, I don’t understand this part of your question.
I am not sure if that will happen unless you have something in memory or cached or avoid the page to be refreshed?
If for a very simple exercise project, assuming you are new, try to conceive a simple public global variable that keep track of the change? Later you will learn about more appropriate options.
You might have already noticed that your postHeight method is unaware of OFF or ON - it will post any time you toggle.
Fortunately there are several ways to get the state. I can imagine several ways so I prefer to see what you find that suit your knowledge? I would hint that those components are accessible through JS in similar fashion as any other HTML element. Then there is the chance that you found a way to save that info in memory… Really: several possibilities IMO.
What I mean here is that when I turn on the switch I want it to stay on until I turn off the switch and then when it is off I want it to stay off until I turn it on.
I’m not caching anything here at the moment but I do using sessionStorage for some things.
Hmm I’m thinking maybe I can access the value, I have it default to true but maybe I can check if value = true, then working = true and if value = false then working = false.
@yjay I think you are closer to a solution regarding the working attribute, also in finding a possible way to track the value as sessionStorage.
The unchecked/checked is a conditional likely based on that value.
As I said, I haven’t worked with this component but I guess there is something in the documentation that can help? There are likely examples you can also find on Internet. I advise you to go through it? I will also check as soon as I have time.
Now I need to figure out how I can get the toggle button to remain on the ON position as long as working = true (or simply until it’s toggled to OFF)
Perhaps localStorage would be a good use as I would like it to remain even after the browser is closed.
Additionally, I need the switch to be ON or OFF depending on what each user has. For ex. if I click ON for Joe’s button, I need it to stay on but when I go to Max’s profile the button should be OFF.
I figured out a better way to set :value, since I want it to be based on if working is true or false, I used a computed property to get the value of working in the data base,
Yes it seems it is, I tried adding :sync="true" which watches for updates on the value but when I use it the button get stuck and only changes from OFF to ON after I return to the page. I saw on github that there might be a problem with the :sync feature https://github.com/euvl/vue-js-toggle-button/issues/130.
The value property should be bound to $event or to an external value somehow. But then I read something about the sync property and edited. But now you are suggesting is not reliable?
Remember that the component should be still accessible using JS. You might have access to value changes of properties. You can use that to debug.
I am adding your findings. The v-bind directive you are using for labels doesn’t seem to be necessary. It appears that the default value of the value property (:value), when unchecked, is false. If you want to change that behaviour so every time you leave the page you want to start from the last value, you might have to bind the property to a computed property or similar that returns a value saved in memory. If that is the value you want to use (one in memory), I think that for a raw implementation you might have to update the value assigned to :value (sorry for these redundancies…) into the last one you have in memory before creation/mounting during the life cycle. I expect that updating :value will also update $event.value. I wonder if that update though might trigger your post method. I expect NOT if your post function is a method, not a mounted as in your last code. Not sure…
Notice also that when you leave the page in the working example the values reset to initial when you refresh. The last value is not saved, even less after you leave the browser.
Ya so what I tried was to output workingStatus computed property like this: What is status? {{workingStatus}} and this showed the state correctly, so on the webpage I see What is status? false but the toggle remains on true.
Ya sorry in my actual code I am using it for translation: v-bind:labels="{unchecked: $t('OFF'), checked: $t('ON'),}".
Right now I get the the value in the database by running axios request in mounted() and then using the results in a computed property, so I would need to get it before?
No the state shows correctly, just the toggle position isn’t staying according to state, so when I exit the page and return the state still shows correctly but the toggle is in the wrong position. So even if state is false, toggled = true
Sorry I meant ya I can try to remove, but ya I tried it but doesn’t seem to make a difference, when I output {{$event.value}} I get undefined for value, before I was outputting my computed property:
Can you first of all try to implement a simple toggle button without @change or any additional value coming from your vue object? Just like in the demo. That should toggle. Check also the toggled attribute as you did in your console.
