I am new to Vue 3. I have below template and I want to add same type rows with different ids when click #addNewOption button.
<template>
<div id='optionList'>
<div class='row' id="row1">
<div class="col-8">
<input type="text" id='option1'>
</div>
<div class="col-4">
<input type="text" id='price1'>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<a href='javascript:void(0)' id='addNewOption'>+Add New Option</a>
</div>
</div>
</template>
<script>
export default {
name: "AddItemModifierModal",
setup(){
}
}
</script>
Related
I have declared a data variable inside my component. There is a select box that dynamically changes this data value. what I want to use this data value inside my router-link. but somehow it is not working.
Here is my code for the same:
<template>
<div class="row bg-blue content-padding pdt-70 relative d-flex">
<div class="col-md-8">
<div class="row mgb-60">
<form>
<div class="col-8 form-group mgb-30">
<label for="work-profile" class="color-white">Work Profile*</label>
<select id="work-profile" v-model="page" name="work-profile" class="form-control">
<option value="self-employed">Self Employed</option>
<option value="salaried">Salaried</option>
</select>
</div>
<div class="col-12 form-group">
<router-link :to=["/"+page]>
<button type="submit" class="btn form-button button-blue d-flex-inline justify-content-center align-items-center color-white bg-blue">Get Started</button>
</router-link>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "LandingPage",
data: function()
{
return{
page:'salaried'
}
},
components: {
},
};
</script>
Replace <router-link :to=["/"+page]> to <router-link :to="'/'+page"> you do not need [] with binding to
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.
Whenever I open the component, the previous information that I've typed still remains in the Input Boxes. I have three input box. One is not inside a form tag and the other two are inside a form tag. How do we clear the Input Boxes when I open the component? I tried using this.form.reset(); but it does not work.
<!-- left column -->
<div class="col">
<div class="form-group">
<label>Scan Item</label>
<input type="search" class="form-control is-warning" id="exampleSearchItemBarcode" placeholder="Item Barcode"
#keyup.enter="searchloanItem"
v-model="itemvmodel"
autocomplete="off">
</div>
</div>
</div>
<!-- right column -->
<div class="col">
<div class="card-body">
<form #submit.prevent="createLoan">
<div class="form-group" v-for="loanpatron in loanpatrons" :key="loanpatron.id">
<input type="text" name="patron_id"
v-model="form.patron_id"
class="form-control text-uppercase"
:class="{ 'is-invalid': form.errors.has('patron_id') }"
autocomplete="off">
<has-error :form="form" field="patron_id"></has-error>
</div>
<!-- textarea -->
<div class="form-group">
<label>Date Loaned</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
</div>
<input v-model="form.dateloaned" type="date" name="dateloaned" class="form-control" :class="{ 'is-invalid': form.errors.has('dateloaned') }"
data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask="" im-insert="false">
</div>
<has-error :form="form" field="dateloaned"></has-error>
</div>
<div class="row">
<div class="col">
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
export default {
mounted() {
this.form.reset();
}
}
</script>
I have this component:
<template>
<div class="modal fade modal-primary" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="ImageLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg animated zoomIn animated-3x">
<div class="modal-content">
<ais-index index-name="templates"
app-id="BZF8JU37VR"
api-key="33936dae4a732cde18cc6d77ba396b27">
<div class="modal-header">
<algolia-menu :attribute="category"
:class-names="{ 'nav-item__item': 'nav-color', 'nav-item__link': 'nav-link', 'nav-item__item--active': 'active'}">
</algolia-menu>
</div>
<div class="modal-body">
<div class="container">
<ais-results :results-per-page="10" inline-template>
<div class="row">
<div class="col-6" v-for="result in results.slice(0, 5)" :key="result.objectID">
<div class="card" #click="getTemplate(result)">
<img class="img-fluid" v-lazy="result.image"/>
<div class="card-body">
<p>{{ result.description }}</p>
</div>
<div class="card-footer">
<small>Created: {{ result.created_at }}</small>
</div>
</div>
</div>
<div class="col-6" v-for="result in results.slice(5, 10)" :key="result.objectID">
<div class="card">
<img class="img-fluid" v-lazy="result.image"/>
<div class="card-body">
<p>{{ result.description }}</p>
</div>
<div class="card-footer">
<small>Created: {{ result.created_at }}</small>
</div>
</div>
</div>
</div>
</ais-results>
</div>
</div>
</ais-index>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script>
import Algolia from '#/components/algolia/menu';
export default {
components: {
"algolia-menu": Algolia,
},
data() {
return {
category: 'category',
};
},
methods: {
getTemplate(result) {
console.log(result)
}
}
}
</script>
I have a click listener on the .card div within my <ais-results> tag which calls my getTemplate method. But, whenever I click on that element, it produces this error:
imageModal.vue?8d74:85 Uncaught TypeError: _vm.getTemplate is not a
function
at click (imageModal.vue?8d74:85)
at invoker (vue.runtime.esm.js:2023)
at HTMLDivElement.fn._withTask.fn._withTask
Why is this happening? I have tried #click.native as well, but that didn't work.
The issue is that you’re using an inline template for your <ais-results> component tag, so the data references within that tag are scoped to the <ais-results> instance. This means Vue is looking for a getTemplate method on the <ais-results> component, but not finding it.
In your case, instead of directly calling getTemplate, you could emit an event with the result data and then listen for the event on the <ais-results> tag.
Below is a simplified example where clicking on the .card div in the inline template will emit a card-click event (#click="$emit('card-click', result)"). The <ais-results> tag has a listener for that event (#card-click="getTemplate"), so when the card-click event is fired, the getTemplate method will be called with the result data being passed automatically.
<ais-results :results-per-page="10" inline-template #card-click="getTemplate">
<div class="row">
<div class="col-6" v-for="result in results.slice(0, 5)" :key="result.objectID">
<div class="card" #click="$emit('card-click', result)">
...
</div>
</div>
</div>
</ais-results>
I am building weather app and i am using angular 5 as my frontend framework and local storage as my storage.
I am saving city name from a input field to local storage. The main problem here is when i save city name i want to change my view i.e i want to hide input field and show city name which i have saved earlier.
And next function i have is remove city name from the local storage. In this case also i want to change my view i.e i want to hide city name and show input field. Here is my code
settings.component.html
<div class="row">
<div class="col-md-6 col-xl-8 mt-4 col-center">
<div class="card">
<div class="card-body">
<h3 class="text-center pt-2 pb-2">Setttings</h3>
<hr>
<div class="setting-menu">
<span class="setting-items">
<h5>Add Your City</h5>
</span>
<div *ngIf="storedCity" class="localstorage" #cityDiv>
<div class="storedCity">
<span> {{storedCity | uppercase}} </span>
</div>
<div class="remove-city mt-4">
<span class="remove-icon ml-5">
<i class="fa fa-times" aria-hidden="true" (click)="removeCity()" ></i>
</span>
</div>
</div>
<div class="clearfix"></div>
<div *ngIf="!storedCity" class="city-input pt-4" #inputDiv>
<form action="">
<div class="form-group">
<input type="text" [(ngModel)]="cityName" name="cityName" value={{cityName}} id="cityName" class="form-control" placeholder="Add City ......">
</div>
<div class="form-group">
<button class="btn btn-success add-btn" (click)="update()">Add</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
settings.component.ts
import { Component, OnInit, ViewChild } from '#angular/core';
#Component({
selector: 'app-settings',
templateUrl: './settings.component.html',
styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {
#ViewChild('cityDiv') cityDiv;
#ViewChild('inputDiv') inputDiv;
public cityName: string;
public storedCity = localStorage.getItem("City");
constructor() {
this.cityName = '';
}
ngOnInit() {
}
update() {
localStorage.setItem("City", this.cityName);
this.cityName = '';
}
removeCity() {
localStorage.removeItem("City");
}
}
Add an *ngIf to the input hiding it when the value is set
<input *ngIf='!cityName; else citySet' type="text" [(ngModel)]="cityName" name="cityName" value={{cityName}} id="cityName" class="form-control" placeholder="Add City ......">
and else just show the value
<ng-template #citySet>{{cityName}}</ng-template>