Vue js: Change value using if else - javascript

I am new to Vue and I have two button. One is to show the login section and one is to show the register section. What I am tryin to achieve is, if I click on the login button, I want the login section to show and if I click on the register button, I want to hide login section and the register section to show. And by default, I want the login section to be showing. And also, if I click on the login button or Join button and that section was already showing, I want to keep that section showing. Is there a way to achieve this using if else statement or is there a better way to do this. Below is my code
var app = new Vue({
el: '#app',
data: {
displayLoginPage: true,
displayJoinPage: false
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container-fluid p-0" id="app">
<div class="col-md-12">
<div class="col-md-12 sub-title">
<div class="col horizontal-line">
<h5>PERSONAL DETAILS</h5>
</div>
<div class="col-md-12 text-color-per">
<p>Make Sure All Enter Information Are Correct</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center entry-section col-sm-12">
<div class="col-md-6 entry-option-button-login" id="show-login-section">
<button #click="displayLoginPage = !displayLoginPage" type="button" name="btn button">
Login</button>
</div>
<div class="col-md-6 entry-option-button-join" id="show-join-section">
<button #click="displayJoinPage = !displayJoinPage" type="button" name="btn button">
Join</button>
</div>
</div>
<div v-show="displayLoginPage">
<h5>Hello Login Page</h5>
</div>
<div v-show="displayJoinPage">
<h5>Hello Register Page</div>
</div>
</div>


You could use a single boolean, since there are only two views. Set the variable to true to show the login view and hide the other, and vice versa for false. Additionally, replace v-show with v-if and v-else:
<template>
<div>
<button #click="displayLoginPage = true">Login</button>
<button #click="displayLoginPage = false">Join</button>
<div v-if="displayLoginPage">
<h5>Hello Login Page</h5>
</div>
<div v-else>
<h5>Hello Register Page</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
displayLoginPage: true
}
}
}
</script>
var app = new Vue({
el: '#app',
data: {
displayLoginPage: true
}
})
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<div class="container-fluid p-0" id="app">
<div class="col-md-12">
<div class="col-md-12 sub-title">
<div class="col horizontal-line">
<h5>PERSONAL DETAILS</h5>
</div>
<div class="col-md-12 text-color-per">
<p>Make Sure All Enter Information Are Correct</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center entry-section col-sm-12">
<div class="col-md-6 entry-option-button-login" id="show-login-section">
<button #click="displayLoginPage = true" type="button" name="btn button">
Login</button>
</div>
<div class="col-md-6 entry-option-button-join" id="show-join-section">
<button #click="displayLoginPage = false" type="button" name="btn button">
Join</button>
</div>
</div>
<div v-if="displayLoginPage">
<h5>Hello Login Page</h5>
</div>
<div v-else>
<h5>Hello Register Page</div>
</div>
</div>
If you plan to have more than two views, you could set the variable to a string specific to each view. For example, set displayPage to "login" to show the login-view; or "join" to show the join-view. Change your v-show condition to compare displayPage against the corresponding value:
<template>
<div>
<button #click="displayPage = 'login'">Login</button>
<button #click="displayPage = 'join'">Join</button>
<div v-show="displayPage == 'login'">
<h5>Hello Login Page</h5>
</div>
<div v-show="displayPage == 'join'">
<h5>Hello Register Page</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
displayPage: 'login'
}
}
}
</script>
var app = new Vue({
el: '#app',
data: {
displayPage: 'login'
}
})
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<div class="container-fluid p-0" id="app">
<div class="col-md-12">
<div class="col-md-12 sub-title">
<div class="col horizontal-line">
<h5>PERSONAL DETAILS</h5>
</div>
<div class="col-md-12 text-color-per">
<p>Make Sure All Enter Information Are Correct</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center entry-section col-sm-12">
<div class="col-md-6 entry-option-button-login" id="show-login-section">
<button #click="displayPage = 'login'" type="button" name="btn button">
Login</button>
</div>
<div class="col-md-6 entry-option-button-join" id="show-join-section">
<button #click="displayPage = 'join'" type="button" name="btn button">
Join</button>
</div>
</div>
<div v-show="displayPage == 'login'">
<h5>Hello Login Page</h5>
</div>
<div v-show="displayPage == 'join'">
<h5>Hello Register Page</div>
</div>
</div>


You just need to explicitly set the values for displayLoginPage and displayJoinPage when either button is clicked. See the following example:
var app = new Vue({
el: '#app',
data: {
displayLoginPage: true,
displayJoinPage: false
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container-fluid p-0" id="app">
<div class="col-md-12">
<div class="col-md-12 sub-title">
<div class="col horizontal-line">
<h5>PERSONAL DETAILS</h5>
</div>
<div class="col-md-12 text-color-per">
<p>Make Sure All Enter Information Are Correct</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center entry-section col-sm-12">
<div class="col-md-6 entry-option-button-login" id="show-login-section">
<button #click="(displayLoginPage = true) && (displayJoinPage = false)" type="button" name="btn button">
Login</button>
</div>
<div class="col-md-6 entry-option-button-join" id="show-join-section">
<button #click="(displayJoinPage = true) && (displayLoginPage = false)" type="button" name="btn button">
Join</button>
</div>
</div>
<div v-show="displayLoginPage">
<h5>Hello Login Page</h5>
</div>
<div v-show="displayJoinPage">
<h5>Hello Register Page</div>
</div>
</div>

Related

Get text content of all parent divs

I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>

How to know the selected card style and pass the value to the backend

I want to get the value in a single card selected by the user and post it to the backend
<div class="card-body">
<div class="swiper-container swipercards">
<div class="swiper-wrapper pb-4">
<div class="swiper-slide ">
<div class="card border-0 bg-default text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Visa</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="card border-0 bg-warning text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Maestro</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>

Welcome AegisFor. It looks like you're using Swiper.js?
According to the docs, under events, here is how you determine the selected item in the carousel:
const swiper = new Swiper('.swiper', {
// ...
});
swiper.on('slideChange', function () {
console.log('slide changed', swiper.activeIndex);
});
https://swiperjs.com/swiper-api#events
You could get the values by referring to the slide's attributes, like this:
....
<div class="swiper-wrapper pb-4" >
<div class="swiper-slide " id="card-1" data-card-number="12345">
....
When you change slides, refer to the div that matches the activeIndex of the carousel:
var activeCard = document.getElementById("card-" + swiper.activeIndex);
Now you can get the card number:
var cardNumber = activeCard.getAttribute("data-card-number")
How you send it to your backend depends on what backed you have. You might do something similar to this:
fetch('http://example.com/card?card-number=' + cardNumber)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
The documentation at https://swiperjs.com/swiper-api is quite good. Remember to read the docs thoroughly before posting to SO.

How can I save user input as a variable in javascript with a button onclick?

I want to save what the user types in the input as a variable when the user clicks the button. Than, I want to console.log the new variable with the users information. What am I doing wrong?
<html>
<div class="container bg-light">
<div class="row">
<div class="col-md-3 bg-danger">
</div>
<div class="col-md-6">
<div class="form-group text-center">
<h1>Saving User Data as a Variable with Javascript</h1>
<div class="form-group">
<input id="userdata" class="form-control">
</div>
<div class="form-group mx-auto text-center">
<button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
</div>
</div>
</div>
<div class="col-md-3 bg-danger">
</div>
</div>
</div>
<script>
function saveUserData()
{
// store the tag with id="sign" in var userdata
var userdata = document.getElementById("userdata");
}
// confirm the element exists and what value the user submits
console.log(userdata);
console.log("users value is: " + userdata.value);
</script>
</html>

function saveUserData() {
var name = document.getElementById('userdata').value;
console.log("users value is: " + name);
}
<div class="container bg-light">
<div class="row">
<div class="col-md-3 bg-danger">
</div>
<div class="col-md-6">
<div class="form-group text-center">
<h1>Saving User Data as a Variable with Javascript</h1>
<div class="form-group">
<input id="userdata" class="form-control">
</div>
<div class="form-group mx-auto text-center">
<button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
</div>
</div>
</div>
<div class="col-md-3 bg-danger">
</div>
</div>
</div>

try this
function saveUserData() {
var userdata = document.getElementById('userdata').value;
console.log("users value is: " + userdata);
}

Clicking popup button

I need to do a function that
if class="btn btn-default" exists
click them
this would be problematic bcz there are more btn defaults besides this ones :D
so how do i work with the "Chest unlocked"
<div class="chest_container">
<div class="chest unlocked"></div>
Here's the html
<div id="daily_bonus_content">
<div class="rewards_grid">
<div class="reward day_1">
<div class="center">
<div class="chest_container">
<div class="chest unlocked"></div>
<div class="day">1</div>
<div class="actions">Abrir</div>
</div>
</div>
</div>
<div class="reward day_2">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">2</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_3">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">3</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_4">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">4</div>
<div class="actions"></div>
</div>
</div>
</div>

In vanillaJS, clicking every btn-default in a chest_container
var buttons = document.querySelector(".chest_container .btn-default");
buttons.forEach(function(button) {
button.click();
});
If you catch the click in an event, you can reach the chest_unlocked by doing the following, where e is the event:
var chestUnlockedDiv = e.target.parentElement.parentElement.querySelector(".chest.unlocked");

*ngIf is not working like other *ngIf's

I encountered a strange problem with my *ngIf on one particular variable isAdmin (which should allow me to display the list of users in userList). I'm not sure why its behaving different from all the other *ngIf statements in the same component.
heres a snippet of my js code for the component. This is where isAdmin is being switched from false to true if the user is an Admin.
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
this.usersList = Meteor.users.find({}).fetch(); //update the users list automatically
this.currentUser = Meteor.user(); //update the current user automatically
this.isLoggingIn = Meteor.loggingIn();
this.isLoggedIn = !!Meteor.user();
this.checkAndSub();
});
});
}
checkAndSub(){
if(this.isLoggingIn){
Meteor.call('checkAdmin', function(error, result) {
if (error) {
this.errors.push(error.reason || "call from server has an error");
}
this.isAdmin = result;
console.log(this.isAdmin);
if(this.isAdmin){
Meteor.subscribe("userList");
}
else console.log("User is not admin");
});
}
}
Heres the corresponding HTML
<span *ngIf="viewDetails">
<div class="pizza_details" id="pizza_details" [ngClass]="{'show' : viewDetails, 'hide' : !viewDetails}">
<div class="row">
<!--PIZZA DESCRIPTION PANEL-->
<div class="pizza_description col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="panel" id="description_panel">
<div class="panel-body">
<div>
{{error}}{{message}}
<span *ngIf="isAdmin">
<p><h2>User List</h2></p>
<ul>
<li *ngFor="let iterate of usersList">
_id: {{iterate._id}}
<p>Emails: {{iterate.emails}}</p>
<p>username: {{iterate.username}}</p>
<p>isadmin: {{iterate.isAdmin}}</p>
</li></ul>
</span>
</div>
<h1>Description: </h1>
{{currentPizza.description}}
<p><button type="button" class="btn active" role="button" (click)="toggle()">Toggle</button></p>
</div>
</div>
</div><!--&&&&pizza description collapes&&&&-->
<!--STARTING THE "SECOND PANEL" FOR PICTURES, STYLE, VOTES, AND MODS-->
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row">
<div class="pizza_picture col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="picture_panel">
<div class="panel-body" style="padding:0px;">
<img src="{{currentPizza.imageUrl}}" class="img-rounded" style="max-height: 400px; width:100%;">
</div>
</div>
</div><!--&&&&pizza picture collapse&&&&-->
</div>
<div class="row">
<div class="pizza_style col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="style_panel">
<div class="panel-body">
<h4>Style:</h4>{{currentPizza.style}}
<h4>Location:</h4>
<span *ngIf="currentPizza.location.state">
{{currentPizza.location.state}} ,
</span>
{{currentPizza.location.country}}
<h4>Brand: </h4>{{currentPizza.brand}}
</div>
</div>
</div><!--&&&&pizza style collapse&&&&-->
<div class="pizza_votes col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="vote_panel">
<div class="panel-body">
<h3>Pizza Spectrum Score: </h3>
{{currentPizza.votes}}
</div>
</div>
</div><!--&&&&pizza votes collapse&&&&-->
</div>
<div class="row">
<div class="pizza_users col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="user_panel">
<div class="panel-body">
<h3>SubmittedBy: </h3>
{{submittedBy(currentPizza._id)}}
<ul><li *ngFor="let i of currentPizza.userUpvotes">{{i}}
</li>
</ul>
<p><button type="button" id="exit_details_btn" class="btn active" role="button" (click)="toggleDetails()">Exit Details</button>
<button type="button" id="upvote_btn" class="btn active" role="button" (click)="upVote(currentPizza._id)">Upvote</button>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="downVote(currentPizza._id)">Downvote</button></p>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="cc()">publish all users</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
I know isAdmin is true, but nothing shows up. If I create a separate button to toggle it then my userLIst shows up. Why won't it display properly when the page is loaded?
Thanks

Try changing the span *ngIf to a div. I simple check could be to temporary change the content in the span to a static text ex: hello. Can you then see the hello? If true it's a markup problem

ngZOne.run doesn't mark a component for change detection. All it does is execute the callback function inside the Angular error handler.
You need to inject ChangeDetechRef and call markForCheck.
public constructor(private cdr: ChangeDetectorRef, private zone: NgZone) {
}
then elsewhere:
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
//.....
this.checkAndSub();
this.cdr.markForCheck(); // <--- mark component dirty
});
});
}

Categories

Resources