How can i make this Scroll to a specific Element Using html in Vue when the ID and element i want to click on are in different component?
<template>
<div class="container">
<div class="section">
<Bio/> <--------------------- inside of this is the text i want to click on
</div>
<div class="section">
<About/>
</div>
<div class="section">
<Gallery/>
</div>
<div class="section">
<Counter/>
</div>
<div class="section">
<Services/> <----------------- Section i want to scroll in after click
</div>
<div class="section">
<Clients/>
</div>
<div class="section">
<Clientslogo/>
</div>
</div>
</template>
As explained here, this is how you can achieve such thing
<template>
<div class="container">
<router-link :to="{ hash: '#services' }">Scroll to Services</router-link>
<div class="section">
<Bio id="bio" /> <!-- inside of this is the text I want to click on -->
</div>
<div class="section">
<About/>
</div>
<div class="section">
<Gallery/>
</div>
<div class="section">
<Counter/>
</div>
<router-link :to="{ hash: '#bio' }">Scroll to Bio</router-link>
<div class="section">
<Services id="services" /> <!-- Section I want to scroll in after click -->
</div>
<div class="section">
<Clients/>
</div>
<div class="section">
<Clientslogo/>
</div>
</div>
</template>
Related
Working with bs4. When trying to find html info inside <div data-reactroot> I am never able to locate it.
Inside <div data-reactroot> I am going to have to loop through each text entry and split it. I get how to find a normal tags but data-reactroot seems to be giving me a lot of trouble.
<div data-reactroot="">
<div>
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div class="_1p3joamp">Entire guest suite</div>
<div class="_36rlri">
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">2 guests</div>
</div>
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">1 bedroom</div>
</div>
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">1 bed</div>
</div>
<div class="_36rlri" style="margin-right:0">
<div class="_czm8crp">1 bath</div>
</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Self check-in</span></div>
<div class="_czm8crp">Check yourself in with the keypad.</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Sparkling clean</span></div>
<div class="_czm8crp">9 recent guests said this place was sparkling clean.</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Michael & Tammy is a Superhost</span></div>
<div class="_czm8crp">Superhosts are experienced, highly rated hosts who are committed to providing great stays for guests.</div>
</div>
</div>
</div>
<div style="margin-top:24px;margin-bottom:24px">
<div class="_7qp4lh"></div>
</div>
</div>
</div>
I have tried:
data_soup.find_all("div data-reactroot")
data_soup.get('data-reactroot')
I'm new to VueJS, i have different pages which i organized in 'components'. Now, different pages have different layouts, for example, some pages will not include the header and the footer (which are also individual components).
This is the code for a component that is supposed to include the header
<template>
<Header />
<div class="container main-content">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/dashboards" class="">
<i class="fa fa-user fa-4x"></i>
<p>View Dashboards</p>
</router-link>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/home" class="">
<i class="fa fa-cogs fa-4x"></i>
<p>Manage Settings</p>
</router-link>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</template>
<script>
import Header from './Header.vue'
export default{
name: 'Loyalty',
components:{
'Header': Header
}
}
</script>
And this is my Header.vue
<template>
<div>
<div class="head">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<span class="pull-left" style="padding-left: 10px;">
<router-link to="/home" class="header-text page-link"><span class="fa fa-arrow-left"></span> Home</router-link>
</span>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 custom-hidden-sm">
<span class="pull-right" style="padding-right: 10px;">
<span class="header-text">Waje Loyalty</span>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
name: 'Header',
data(){
return{
page_name: this.$router.currentRoute.name
}
}
}
</script>
When i compile, i get the error:
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
How can i solve this?
The issue is caused by the two root elements in your Loyalty.vue template: <Header /> and <div class="container main-content">.
VueJS component templates can contain one and only one root node.
To solve this, wrap the content of your Loyalty.vue template with a root div.
<template>
<!-- root div -->
<div>
<Header />
<div class="container main-content">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/dashboards" class="">
<i class="fa fa-user fa-4x"></i>
<p>View Dashboards</p>
</router-link>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/home" class="">
<i class="fa fa-cogs fa-4x"></i>
<p>Manage Settings</p>
</router-link>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
</template>
I am trying to make a product review page using Vue js. Please see the below code
App.Vue
<template>
<div class=" wrapper">
<div class="container shadow padding-left-none">
<div class="grid-100 padding-left-none">
<div class="grid-30 padding-left-none">
<product-list></product-list>
</div>
<div class="grid-70">
<reviewPage :reviews="reviews"></reviewPage>
</div>
</div>
</div>
</div>
</template>
review-page.vue
<template>
<div class="grid-100">
<div class="review-wrapper">
<h3>Rate this product</h3>
<div class="rating-section">
<div class="user-ratings">
<rating-star v-on:ratingProvided="ratingProvided"></rating-star>
</div>
<div class="rating-complement" v-if="isRatingProvied">
<span class="complement">{{ratingComplement}}</span>
</div>
<div class="rating-saved pull-right" v-if="isRatingSaved">
<span class="saved-status">Your rating has been saved</span>
</div>
</div>
<div class="reviews-container">
<div class="review" v-for="review in reviews" :key="review.id">
</div>
</div>
</div>
</div>
</template>
product-list is having product.vue components.
whenever i am selecting a produc, the properties of review-page components are not getting reset. I want to reset "isRatingProvied" property.so that a fresh review page will be rendered for every product selection.
My goal is to get like this.
I use bootstrap-grid.min.css from bootstrap-4.1.2
What do I do wrong? My code
<div class="wrapper d-flex flex-column" style="min-height: 100vh;">
<section class="main d-flex flex-grow-1">
<div class="container-fluid d-flex align-items-stretch">
<div class="row">
<div class="col-md-3">
<div class="menu">
Aside
</div>
</div>
<div class="col-md-9">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>
You need to make changes in your structure. I have made some changes for you, please see if it serves the purpose.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="footer">
Header
</header>
<div class="wrapper d-flex flex-column" style="min-height: calc(100vh - 24px);">
<section class="main d-flex flex-grow-1">
<div class="container-fluid">
<div class="row" style="height:100%;">
<div class="col col-md-3" style="background-color:blue;">
<div class="menu">
Aside
</div>
</div>
<div class="col col-md-9" style="background-color:pink;">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>
I am trying to put a click event in an anchor tag but the event is not showing in chrome.
below is the html
<div class="col-md-4 col-sm-6 col-xs-12 paddInner" *ngIf="module.valid">
<div class="row marLeftRight_0">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="dashboard-icon ">
<img src="./assets/img/icon/Merchant_onboarding_03.png" alt="MerchantBoarding" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-8" >
<div class="dvIndexInnerHeader">
<a (click)="goTomethod()">ABC</a>
</div>
<p class="pSections">
asasasa
</p>
</div>
</div>
</div>
component.ts
public goTomethod() {
this.module.goTomethod();
}