i want to check value in input if has any value in input i want to add class sh-is-active to a div using VUE but i don't know how... please help me
<template>
<div class="sh-wrap sh-wrap-input sh-is-active">
<label class="sh-label">First and Last Name</label>
<input type="text" class="sh-form-control sh-input" placeholder="First and Last Name" />
<span for="email" class="error">Required</span>
</div>
</template>
You can use v-model bind a value to the input and to dynamically add the classes :class="{ 'sh-is-active': name }". Read the official docs on how to bind classes and styles
new Vue({
el: '#example',
data() {
return {
name: null
}
}
})
.sh-wrap-input {
padding: 1rem;
border: 1px solid gray;
}
.sh-is-active {
background: yellow;
}
.sh-label {
display: block;
margin-bottom: .125rem;
}
.error {
display: block;
color: red;
font-size: 12px;
margin-top: .125rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example" class="sh-wrap sh-wrap-input" :class="{ 'sh-is-active': name }">
<label class="sh-label">First and Last Name</label>
<input v-model="name" type="text" class="sh-form-control sh-input" placeholder="First and Last Name" />
<span v-if="!name" for="email" class="error">Required</span>
</div>
to check if value exists you can add :value="inputValue"
and watch for it using
watch: {inputValue: function(value){
"add your class here"
}}
Related
I don't know how to express the CSS code below using elm-css.
input[name="tab_item"] {
display: none;
}
<div>
<input type="radio" name="tab_item">
<label>hoge hoge</label>
</div>
So i have been looking on internet for some kinda of dialog/modal in vuejs2 that pops up when exit is clicked, that asks us if we are sure that we want to leave. And when click yes, function is called , and when clicked no, nothing happens just dialog/modal is exited. I was not able to find anything on the vuejs.org.Im not using bootstrap and not using vutify. Any suggestions how this can be done, that popup should blackout the rest of the screen and poput in the middle of the screen.
Its very easy to create your own dialog.
Here is a small component that I created for you.
https://jsfiddle.net/ew1c3z6u/
Im really new to veujs but this should work for you
var component =new Vue({
el: '#dialog-container',
methods:{
show:(event)=> {
component.visibility = true;
// maybe you could ajest the position of the dialog here.
// eg top, center etc
},
onSave:(event)=> {
alert("save clicked")
component.visibility = false;
},
onCancel:(event)=> {
alert("cancel clicked")
component.visibility = false;
}
},
data: {
buttons:[], // you could have a list a dynamic buttons here
content:"this is the content of the dialog",
visibility:false,
title: 'this is the title of the dialog'
}
})
.dimBackground{
background:black;
opacity:0.5;
z-index:90;
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
}
#dialog-container > #dialog
{
background:white;
z-index:100;
min-width:400px;
min-height: 100px;
border:1px black solid;
display:inline-block;
padding:0;
position:fixed;
left:30%;
top:30%;
overflow-x:hidden;
overflow-y:auto;
}
#dialog-container > #dialog > h1{
width:99%;
background:blue;
color:white;
margin:0;
font-size:20px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
}
#dialog-container > #dialog > .content{
padding:5px;
}
#dialog-container > #dialog > h1 > div{
display:inline-block;
float:right;
position:relative;
top:-3px;
padding-right:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<div id="dialog-container">
<input type="button" value="show dialog" v-on:click="show" />
<div class="dimBackground" v-if=visibility> </div>
<div id="dialog" v-if=visibility>
<h1>
{{title}}
<div>
<button v-on:click="onSave" >
Save
</button>
<button v-on:click="onCancel">
Cancel
</button>
</div>
</h1>
<div class="content">
{{content}}
</div>
</div>
</div>
Please look the below image
I have two users and their allowed channels.
My issue is :
When I click one channel of a user, the same channel is also get checked of other user. For example:
When I click Commissions of user Deepu, the channel Commissions of user Midhun also get checked.
I have to avoid that, the clicked channel of the user should only selected, not other user's.
I tried this
<v-data-table
:headers="headers"
:items="UserChannels"
:loading="datatableloading"
class="elevation-1"
>
<template v-slot:items="props">
<td class="text-xs-left">{{ props.item.username }}</td>
<td class="text-xs-left">
<ul class="channel-listitems">
<li v-for="item in Channels">
<input type="checkbox" class="channel-checkbox" :value="item.id" v-model="checkedChannels">
{{ item.channel_name }}
</li>
</ul>
<br>
<span>Checked names: {{ checkedChannels }}</span>
</td>
</template>
</v-data-table>
I am using Vue.js for doing this.
You can create mapping dict for each user Channels selection.
Please refer following codepen - https://codepen.io/Pratik__007/pen/oNgaXeJ?editors=1010
In data
checkedChannels:{},
Created
created () {
console.log(this.Channels)
let vm = this;
this.Users.map(function(item){
vm.$set(vm.checkedChannels,item['name'],[])
return item;
})
},
The official Vue docs states, you can use v-model on multiple checkboxes using the same array. ( Docs : https://v2.vuejs.org/v2/guide/forms.html#Checkbox )
Also working example : https://codesandbox.io/s/hungry-kepler-t7mkw
Select elements for array with checkboxes and v-model
<template>
<div id="app">
<!-- First, iterate over all users -->
<div v-for="(user, index) in users" class="user">
<p class="name">{{ user.username }} - Checked Channels {{user.channels}}</p>
<!-- Create checkbox for each available channel, and v-model it to user.channels -->
<div class="channel">
<label v-for="(channel, index) in availableChannels">
{{channel}}
<input type="checkbox" v-bind:value="channel" v-model="user.channels">
</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
users: [
{
username: "User1",
channels: ["channel1", "channel2"]
},
{
username: "User2",
channels: ["channel3"]
}
],
availableChannels: [
"channel1",
"channel2",
"channel3",
"channel4",
"channel5"
]
};
}
};
</script>
<style>
.user {
min-height: 100px;
display: flex;
align-items: center;
border: 1px solid black;
margin-bottom: 10px;
justify-items: center;
}
.name,
.channel {
flex: 1;
}
.channel {
min-height: 100px;
display: flex;
flex-direction: column;
}
</style>
At the beginning I would like to say that I know that there is ready to use stepper from CDK or Materials but I would like to create "my own" in order to learning angular 8.
To be honest I don't know where I should search help now that is why I decided to write here. Maybe someone give me some advices and I will publish my work at the end.
So let's begin:
The index HTML code looks like that:
<stepper>
<step>
<ng-template step-label>First name</ng-template>
<input placeholder="First name" required>
<div>
<button >Next</button>
</div>
</step>
<step>
<ng-template step-label>Last name</ng-template>
<input placeholder="Last name" required>
<div>
<button >Next</button>
</div>
</step>
<step>
<ng-template step-label>Address name</ng-template>
<input placeholder="Address" required>
<div>
<button >Next</button>
</div>
</step>
</stepper>
Components + directive
#Directive({selector: '[step-label]'})
export class StepLabel{
constructor(public template: TemplateRef<any>){};
}
#Component({selector: 'step-header', templateUrl: 'step-header.html'})
export class StepHeader{
#Input() label: TemplateRef<StepLabel>;
}
#Component({
selector: 'step',
template: '<ng-template><ng-content></ng-content></ng-template>'
})
export class Step{
#ViewChild(TemplateRef, {static: true}) content: TemplateRef<Step>;
#ContentChild(StepLabel, {static: true}) label: TemplateRef<StepLabel>;
}
#Component({selector: 'stepper', templateUrl: './stepper.html'})
export class Stepper implements AfterContentInit {
stepsArray = [];
#ContentChildren(Step) steps: QueryList<Step>;
ngAfterContentInit() {
this.stepsArray = this.steps.toArray();
}
}
stepper.html
<div class="header-steps" style="bordeR: 1px solid green; padding: 10px;">
<ng-container *ngFor="let step of stepsArray; let i = index; let isLast = last">
<step-header [label]="step.label"></step-header>
</ng-container>
</div>
<div style="border: 1px solid blue; padding: 5px; margin: 5px;" class="content-steps">
<div *ngFor="let step of stepsArray; let i = index">
<ng-container *ngIf="step" [ngTemplateOutlet]="step.content"></ng-container>
</div>
</div>
step=header.html
<div class="step-label">
<ng-container *ngIf="label" [ngTemplateOutlet]="label.template"></ng-container>
</div>
I have updated whole "basic" project. It works.
I have one quesition. Why in the Directive StepLabel have to be constructor.
I tried to add somethink like that :
#ViewChild(TemplateRef, {static: true}) template: TemplateRef<StepLabel>;
but it doesn't work.
In your step component's template wrap ng-content in ng-template
template: '<ng-template><ng-content></ng-content></ng-template>'
And then get template using ViewChild
#ViewChild(TemplateRef, { static: true }) content: TemplateRef<any>;
In the end you'll get something like:
#Component({
selector: 'step',
template: '<ng-template><ng-content></ng-content></ng-template>'
})
export class Step {
#ViewChild(TemplateRef, { static: true }) content: TemplateRef<any>;
}
I tried tweaking the CSS coding and no prevail. Things i want:
search box with border radius of 5px
enlarge the search icon with out getting it dispalced
both search box and search icon evenly placed around the div
HTML CODE:
<div class="search"
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button">
</form>
</div>
</div>
CSS CODE:
.search{position:fixed;
height:25px;
width:194px;
top:189px;
left:14px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;}
Notice: Your class="search" div is not closed !!
Here is the code that should work and fullfill all the three conditions of yours
<div class="search">
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button">
</form>
</div>
Css Code:
.search{position:absolute;
height:28px;
width:190px;
top:140px;
left:100px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;
}
form#input{
display:inline-block;
}
.searchbox{
}
.search_text{
margin-top:4px;
margin-left:5px;
border-radius:5px;
text-align:center;
}
.button{
margin-top:5px;
margin-left:2px;
position:absolute;
height:20px;
width:20px;
}
.button:hover{
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
opacity: 3;
}
Working JSfiddle Demo - http://jsfiddle.net/vg8Mn/
Hope this helps :)