Hello to anaisUx and a warm welcome to the world of SO.
To tackle your query effectively, it would be great if you could provide us with a code snippet. What attempts have you made so far? Where are you facing challenges?
Regarding your inquiry about v-if: I regret to inform you that utilizing v-if won't address your issue. In VueJS templates, v-if is utilized to determine whether or not an element should be rendered. The scenario you've described seems more inclined towards implementing business logic, which ideally belongs in your component rather than within your templates. Subsequently, the outcomes can then be rendered in the template.
I don't intend to sound severe, but it appears that you're relatively new to VueJS and programming overall. Rest assured, I'm here to steer you in the correct direction.
Begin by creating your VueJS application: https://v2.vuejs.org/v2/guide/#Getting-Started
Create an input (time spent) and link it to a data property: https://v2.vuejs.org/v2/guide/#Handling-User-Input
Given that time saved depends on time spent, a computed property appears to be a suitable solution: https://v2.vuejs.org/v2/guide/computed.html
Implement your business logic using basic if statements.
In simpler terms:
- Establish a data property called timespent
- Add an input field in your template linked to timespent
- Create a computed property named timesaved that utilizes timespent for calculating the potential time savings for the user
- Showcase timesaved within your template
Expected outcome: Upon a user entering data in the input field, the VueJS app should automatically display the calculated timesaved in the template as updates occur seamlessly.
You can hone your skills on platforms like CodePen, jsfiddle, codesandbox.io/s/vue, or any similar site. Feel free to share your code here for insightful feedback.
Edit: As a token of acknowledgment towards your efforts and progress, below is a functional example:
https://codepen.io/bergur/pen/WqPjNo
new Vue({
el: '#app',
data() {
return {
hours: ''
}
},
computed: {
save() {
if (this.hours > 0 && this.hours < 20) {
return 1
}
if (this.hours >= 20 && this.hours < 30) {
return 10
}
if (this.hours >= 30 && this.hours < 50) {
return 20
}
if (this.hours >= 50) {
return 30
}
}
}
})
The data property 'hours' keeps track of the hours the client invests in invoicing. As emphasized earlier, there's no necessity for multiple v-if conditions; instead, the business logic should reside within the component.
I've employed a computed property named 'save' to calculate the hours the customer can potentially save.