Keep new state of vue toggle button and change axios params

[evaristoc]

This is the simplest one I found in the demo

<toggle-button :labels="true" color="#82C7EB"/>

[yjay]

@evaristoc

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

Ya I tried setting val1 to always = true but it’s showing the value in the database so if a user has working: false it displayed false.

@evaristoc

Can you first of all try to implement a simple toggle button without @change or any additional value coming from your vue object?

Yes i can try this.

Would it also help if I made a codesandbox?

[evaristoc]

@yjay

toggled keeps staying as true, I’m not sure where it is coming from.

I think it means that you touched it. I think it is like saying that you used the button at least once.

[evaristoc]

@yjay

Would it also help if I made a codesandbox?

I think it will help for sure, but I won’t have more time today to see this one I am afraid. I will come back to you though if you are still in trouble tomorrow. Let’s stay in contact.

Meanwhile, check the simplest implementation and try to build the component step by step from there? First testing hardcoded values, then computed, etc.

[yjay]

So I tried the basic implementation of the toggle button and I see in the console, toggled switches from true to false depending if it is ON or OFF. Of course when I go off and return it defaults to :value which I set to false.

[evaristoc]

@yjay

So I tried the basic implementation of the toggle button and I see in the console, toggled switches from true to false depending if it is ON or OFF.

Okey. Then it is another thing…

[yjay]

@evaristoc

I think it will help for sure, but I won’t have more time today to see this one I am afraid. I will come back to you though if you are still in trouble tomorrow. Let’s stay in contact.

Sure sounds great!
Thanks so much, I really appreciate your help!!

[evaristoc]

@yjay

Ya I tried setting val1 to always = true but it’s showing the value in the database so if a user has working: false it displayed false.

Later you have to explain me what you mean with a database? I am not considering you have one. I was assuming it was plain front-end.

I would suggest to first get rid of any database for now. We can use localStorage and change values there if you want.

Right now it is confusing, at least for me.

[yjay]

@evaristoc

Later you have to explain me what you mean with a database? I am not considering you have one…

Oh sorry, yes I have true or false value saved in a database, so when I sent the axios request it changes the value:

@yjay

try {
          const res = await  axios.post(url,  {
            type: 'height', working: //true if switched to ON, false if OFF, 
          }).then(res => res.data);

So when I turn on the switch, working is set to true which updates working on the backend to true, I want the switch to remain ON as long as working is true, that is why I used the computed property workingStatus to get the value of working from the backend.
Then when I switch to OFF, working updates to OFF in the backend and as long as working is OFF in the backend I want the switch to stay in the OFF position.

[yjay]

I made a codesandbox, I’m using typicode fake api so the POST request won’t actually change the value of working here but I have working set as false but the toggled still stays true, if you hit OFF button an then refresh the page, it will still be ON even though workingStatus is true.

[yjay]

@evaristoc so for now I just built my own toggle button so I could get it to do what I needed:

<label class="switch" for="toggle_button" >
 <input type="checkbox" id="toggle_button" v-model="activity"  @click="postHeight( !working);" >
 <span v-if="working" class="slider round"  ><span class="on-btn">'ON'</span></span>
 <span v-if="! working" class="slider round" ><span class="off-bn">'OFF'</span></span>
</label>

and I added css based on this w3schools.

[evaristoc]

What I see in the codesandbox is the following:

1. Your axios is making an error, so it is not entering your response. But if you go to the catch, you can see that whenever the async enters your axios the variables can be updated:

catch (err) {
        this.toggled = arg2;
        console.log("toggled", this.toggled);
        this.workingStatus = arg2;
        console.log("workingStatus", this.workingStatus);
        alert("can't post");
      }

2. You also had

this.results[0].value = val1;

I think it is not correct. Your goal was to updated working wasn’t it? Anyway: it is not working.

3. Because the axios.post is not updating the value or working due to the error, the working property never has a last state that you can update in your mounted() from your database - the initial value never updates from false.

results 
[Object]
0: Object
id: 1
type: "height"
working: false

However, I updated its value in the mounted() to true.

  mounted() {
    axios
      .get("https://my-json-server.typicode.com/ynjacobs/workingApi/db")
      .then(response => {
        this.results = response.data.data;
        console.log("results", this.results);
        this.workingStatus = true;
        console.log("workingStatus", this.workingStatus);
      });
  }

And got a correct initial value of working when reloading the page:

results 
[Object]
0: Object
id: 1
type: "height"
working: true

mounted or created are the usual places to initialize the values before the page is loaded. By the way, mounted() might update ONCE - when mounted. I think that axios.get wont be called again during the time the page is live. Is that what you want? I think I would do the same though.

Still not completely sure what you need but I am sure this will help you a little more

My changes: https://codesandbox.io/s/boring-rgb-7qqj2?file=/src/components/HelloWorld.vue:1155-1473

[evaristoc]

@yjay

@evaristoc so for now I just built my own toggle button so I could get it to do what I needed:

Sometimes is what you need… I usually prefer this route; some components are rather obscure and rigid and then you have to learn what they do and how.

Luckily vue is flexible enough to let you do many things - as a middle way between React and Angular, you can choose what fit you better.

[yjay]

@evaristoc

My changes: boring-rgb-7qqj2 - CodeSandbox

Thanks so much, this worked great!!

@evaristoc

Sometimes is what you need… I usually prefer this route; some components are rather obscure and rigid and then you have to learn what they do and how.

Ya I figured it would be easier for me to customise it to my needs.

[yjay]

@evaristoc thanks again for taking the time to help me, really appreciate it!!