Keep new state of vue toggle button and change axios params

Front End Help
#1

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");
        };
      },
}

Thanks so much!

#2

Hi @yjay

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.

Let’s see what other people say about it?

Good luck!

1 Like
#3

Hi @evaristoc thanks for reading my question!

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.

#4

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

1 Like
#5

@evaristoc thanks so much, I will continue to research and see what solutions I can find.

#6

Alright so I think I figured out how to get working.

I found in the vue-js-togggle-button demo an example using $event.value. So I was able to use that to set true or false:

<toggle-button :value="false" @change="postHeight($event.value)"
     v-bind:labels="{unchecked: 'OFF', checked: 'ON'}"/>

<script>
methods:{
postHeight: async function(event) {
        try {
          const res = await  axios.post(url,  {
            type: 'height', working: event 
          }).then(res => res.data);
        } catch (err) {
            alert("can't post");
        };
      },
}

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.

#7

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,

computed: {
 workingStatus: {
      get () {
        return this.results[1] ? this.results[1].working : ''
      },
      set (val1) {
				this.results[1].value = val1        	
      }
}
mounted(){
      axios.get(url).then(response => {
        this.results = response.data.data
      })
    }

but even though value = true or false, it keeps staying ON.
Screenshot from 2020-09-16 12-28-57
For some reason. toggled keeps staying as true, I’m not sure where it is coming from.

#8

I am also reading something about an attribute named sync. Can you check that (Properties)?

Can you also find out what srcEvent is (Events)?

It is all in the documentation :

#9

Thanks so much!

Sorry, what do you mean by this?

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.

Yes I can try to look into this.

#10

Sorry, I edited the message…

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.

#11

No problem!

Ya I’m not totally sure but it seems after one of the updates it won’t let the button move if the :value is false or something.

#12

It seems the srcEvent may be related to $event

#13

I am checking https://github.com/euvl/vue-js-toggle-button/blob/master/demo/src/App.vue, which is likely the code for the following working example: http://vue-js-toggle-button.yev.io/.

Have you tried this set into your component?

<toggle-button  @change="postHeight($event.value)"
     :labels="{unchecked: 'OFF', checked: 'ON'}"/>
      <pre>State: {{$event.value}}</pre>
    </div>

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.

#14

Thanks so much!

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?

#15

Let’s deal with this one first?

Do you mean it is not behaving as in the demo? Can you get rid of the :value for a moment?

#16

Sure

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

Yes

#17

Ok… what is toggled? I don’t see that declaration in your code.

And what do you mean with “yes”? You tried and it was better, or just tried and did the same?

#18

toggled is a data value given from the plugin:
Screenshot from 2020-09-16 12-28-57

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:

#19

Can you set it to a value if undefined? I just want to see something.

#20

Let’s go step by step.

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.