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.
Related
I created a recipe website, you can find it here https://hungry-vegetarian.com/.
The tab on the index page is a vue instance. I'm trying to create a search bar that is also a vue instance.
The problem occurs when I try to display searched recipes on the index page. It just shows the search result on top of the search bar.
Ideally, only searched recipes should appear on the tab just like they are now but without any indications on top of the tab like Breakfast, Salad, Bakery, etc.
I don't know how to make two objects work together. For now, they work separately without communicating with each other.
SEARCH
<div id="search">
<div class="main-search">
<h1 class="search-question">What are you in the mood for?</h1>
<div class="search-box">
<input type="text" v-model="searchQuery" class="input-search" placeholder="Bread">
<button class="btn-search"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="container">
<div class="recipe" v-for="post in filteredList">
<div v-if="searchQuery">
<a v-bind:href="post.url" class="recipe-card__card-link" target="_blank">
<img v-bind:src="post.image" alt="" class="recipe-card__image"/>
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{post.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{post.body}}</p>
<a v-bind:href="post.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
tab
<main id="tab">
<header>
<nav>
<ul>
<div id="arrow">
<span></span>
<span></span>
<span></span>
</div>
<li v-for="(tab, tabName) in tabs" :key="tabName">
<button class="tab" #click="setTabActive(tabName)" :class="{'active': tabName === activeTab}">
<span class="tab-copy">{{ tabName }}</span>
<span class="tab-background">
</span>
</button>
</li>
</ul>
</nav>
</header>
<article>
<div class="container">
<transition name="fade" mode="out-in" appear :duration="500">
<tab-content v-for="(tabContent, t) in tabs" :data="tabContent" :key="'content'+t" v-if="t === activeTab" inline-template>
<div class="content-wrapper">
<div class="recipes" v-for="(recipe, i) in data.recipes" :key="i">
<a v-bind:href="recipe.url" class="recipe-card__card-link"></a>
<img :src="recipe.image" alt="" class="recipe-card__image">
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{recipe.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{recipe.body}}</p>
<a v-bind:href="recipe.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</tab-content>
</transition>
</div>
</article>
</main>
I tried to combine instances search and tab into just one instance tab, but it always gives me a Vue warning:
[Vue warn]: Property or method "searchQuery" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Also, I feel like I can have just the wrong approach to this problem I am trying to solve. Please, any suggestions are welcome. I am stuck.
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>
I want to showing profile on click for logged in user, when i click to that, my profile page is rendered, but header content is not loaded properly, i checked in console, it shown me an error, did you register component properly. but if i refresh or reload page, header content is showing and console error also cleared that showing did you register component properly.
please help me where i mistaken.
header.vue
<template>
<div>
<div class="top-header">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Free shipping on all orders over $100</p>
</div>
<div class="col-md-6">
<div class="links" v-if="!this.$page.auth.user">
<inertia-link :href="route('login.page')"> Log in </inertia-link>
<InertiaLink :href="route('RegistrationForm')">Register</InertiaLink>
</div>
<div class="id-link" v-else>
<div class="profile-content" #click="OpenProfile"> <b-link href="#"> Welcome {{this.$page.auth.user.name}} </b-link> </div>
<div class="profile" v-if="expanded">
<b-img src="/images/profile.jpg" alt="image"></b-img>
<ul>
<li> <b-button variant="primary"> <inertia-link :href="route('User-Profile')" method="get"> Profile </inertia-link> </b-button> </li>
<li> <b-button variant="primary"> <inertia-link :href="route('logout')" method="post"> Logout </inertia-link> </b-button> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<header>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="logo">
<img src="images/logo.png">
</div>
</div>
<div class="col-md-9">
<div class="navbar">
<ul>
<li> <InertiaLink :href="route('home')">Home</InertiaLink> </li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Single</li>
<li> <inertia-link :href="route('Contact-Us')">Contact US</inertia-link> </li>
</ul>
</div>
</div>
</div>
</div>
</header>
</div>
</template>
<script>
import Dropdown from '#/Shared/Dropdown'
import Icon from '#/Shared/Icon'
import Profile from './Profile.vue'
export default {
components: {Dropdown,Icon,Profile},
data() {
return{
expanded:false,
profile:false,
}
},
methods:{
OpenProfile(){
if(this.expanded==false){
this.expanded=true;
}
else{
this.expanded=false;
}
},
}
}
</script>
profile.vue
<template>
<div class="contact-page">
<div>
<header-content> </header-content>
</div>
<div class="table-content">
<b-container>
<div class="table-heading">
<h1>User Profile</h1>
</div>
<b-row>
<b-col cols="3">
<div class="login-id">
<div class="id-img">
<b-img src="images/profile.jpg"></b-img>
</div>
<h2>{{this.$page.auth.user.name}}</h2>
</div>
</b-col>
<b-col cols="9">
<div class="table-area">
<div class="out-layer">
<div class="head">
<h4>User Information</h4>
</div>
<b-link>
<div class="pencil">
<b-img src="images/edit.png"></b-img>
</div>
</b-link>
</div>
<div class="user">
<b-row no-gutters>
<b-col cols="6"><span class="text">NAME</span></b-col>
<b-col cols="6"><span class="link">{{this.$page.auth.user.name}}</span></b-col>
</b-row>
</div>
</div>
</b-col>
</b-row>
</b-container>
</div>
<div>
<footer-content> </footer-content>
</div>
</div>
</template>
<script>
import HeaderContent from './Header.vue';
import FooterContent from './Footer.vue';
export default {
components: {HeaderContent,FooterContent},
data(){
return {
}
},
}
</script>
I see an error in profile.vue, you don't have to use this inside <template>.
Are other components you call in profile.vue registered correctly?
Try to remove some portions of code to debug which tags throw the error.
I'm developing a project with VueJS. Now I am only including a ready-made template in the Vue project. I haven't written any vue code yet. But I keep getting compile errors. I am sure there is no error in my code. But the error just doesn't go away. I share with you my codes and error message in the component I got an error.
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting </h6>
<h1 class="font-weight--reguler mb-15">Facilitate All <br> Local IT-related Service Providers </h1>
<p>Highly Tailored IT Design, Management Support Services. </p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt="" />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Where is your template tags? You have to write your divs in a template in vue files.
You can look at there for more info: https://v2.vuejs.org/v2/guide/syntax.html
<template>
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting</h6>
<h1 class="font-weight--reguler mb-15">
Facilitate All
<br />Local IT-related Service Providers
</h1>
<p>Highly Tailored IT Design, Management Support Services.</p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
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')