This is the simplest one I found in the demo
<toggle-button :labels="true" color="#82C7EB"/>
This is the simplest one I found in the demo
<toggle-button :labels="true" color="#82C7EB"/>
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.
Yes i can try this.
Would it also help if I made a codesandbox?
I think it means that you touched it. I think it is like saying that you used the button at least once.
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.
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.
Okey. Then it is another thing…
Sure sounds great!
Thanks so much, I really appreciate your help!!
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.
Oh sorry, yes I have true or false value saved in a database, so when I sent the axios request it changes the value:
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.
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.
@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.
What I see in the codesandbox is the following:
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");
}
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.
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
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.
Thanks so much, this worked great!!
Ya I figured it would be easier for me to customise it to my needs.