Here i have 2 names, firstname & lastname. How do i autogenerate a different name using first and last names
(eg: firstname.lastname or firstname_lastname)
<q-input name="firstname" v-model="first" float-label="First name"
v-validate="'required|alpha_spaces'" clearable/>
<i v-show="errors.has('firstname')" class="fa fa-warning "></i>
<div class="containerError">
<span v-show="errors.has('firstname')" class="text-negative text-right">{{ errors.first('firstname') }}</span>
</div>
<q-input name="lastname" required="required" v-model="last" float-label="Last name" v-validate="'required|alpha_spaces'" clearable />
<i v-show="errors.has('lasttname')" class="fa fa-warning "></i>
<div class="containerError"> <span v-show="errors.has('lastname')" class="text-negative text-right">{{ errors.first('lastname') }}</span>
</div>
<template>
<div v-if="this.last != ''" float-label="fullname">
User-name :{ {this.first}}.{{this.last}}
</div>
</template>
Related
I have four inputs in the same row and one of the input is conditionally visible by clicking "Click" button.
So if all four inputs are visible, the inputs datepicker1 and datepicker2 are sticked on the inputs above.
What is the correct bootstrap way to arrange and beautify the distances between the inputs?.
Gutters are not available on bootstrap 3.
<div class="col-md-3">
<select class="lookup-type-select form-control" name="created_lookup_type_1">
<option value="range">Range</option>
<option value="range__exclude">Exclude Range</option>
</select>
</div>
<div class="lookup-value">
<div class="col-md-3">
<select name="created__1_0" class="filter-input shortcut form-control" id="id_created__1_0">
</select>
</div>
<div class="col-md-8 row custom" style="display: inline;">
<div class="col-md-6">
<div class="datetimepicker input-group start-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_1" value="" type="text" id="datepicker1" placeholder="From">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<div class="col-md-6">
<div class="datetimepicker input-group end-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_2" value="" type="text" id="datepicker2" placeholder="To">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3 row month_only" style="display: none;">
<div>
<div class="datetimepicker input-group start-date date month_only" style="display: none;">
<input class="filter-input form-control" name="created__1_3" value="" type="text" id="id_created__1_3" placeholder="Month">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>
<button type="button" class="btn remove-button">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button onclick="myFunction()">Ckick</button>
<script>
function myFunction() {
if (document.getElementById('id_created__1_0').style.display != "none") {
document.getElementById("id_created__1_0").style.display = "none";
} else {
document.getElementById("id_created__1_0").style.display = "inline";
}
}
</script>
Jsfiddle example
Should be like the following pic
I have a table that uses bootstrap Vue's table. Each row of the table corresponds to an item. My current problem is I need to add an icon next to each row, and display them every time I hover over that row, and then do some function when I click on this icon. But I can't find a way to add an icon. I have tried following the instructions on https://bootstrap-vue.org/docs/components/table with using slots but it only works for #head and #cell. Need an idea on this issue. This is my code and a picture describe my problem
<b-table
ref="table"
class="minh--30 mh--100 overflow-y-auto"
bordered
responsive
:items="items"
:fields="fields"
>
<template #head()="data">
<span>{{ $t(data.field.label) }}</span>
</template>
<template #cell(field)="data">
<span
v-if="data.item.isDrag"
class="d-block p-3"
>{{ data.item.field }}</span>
<b-dropdown
v-else
right
no-caret
variant="white"
class="minw--40 w-100"
menu-class="w-100 mh--24 overflow-auto minw-unset"
>
<template #button-content>
<div
class="flex-center minh--11 text-normal position-relative px-2"
>
<span class="pr-5 word-break text-line-clamp-1">{{ data.item.field }}</span>
<i
class="fas fa-chevron-down position-absolute top-50 end--1 translate-middle-y px-2"
/>
</div>
</template>
<b-dropdown-item
v-for="item in listField"
:key="item.id"
variant="normal py-2"
class="fs-12 fs-xl-15"
#click="selectField(item, data)"
>
<span class="word-break text-line-clamp-1">{{ $t(item.text) }}</span>
</b-dropdown-item>
</b-dropdown>
</template>
<template #cell(action)="data">
<b-dropdown
right
no-caret
variant="white"
class="minw--40 w-100"
menu-class="w-100 mh--24 overflow-auto minw-unset"
>
<template #button-content>
<div
class="flex-center minh--11 text-normal position-relative px-2"
>
<span class="pr-5 word-break text-line-clamp-1">{{ data.item.action }}</span>
<i
class="fas fa-chevron-down position-absolute top-50 end--1 translate-middle-y px-2"
/>
</div>
</template>
<b-dropdown-item
v-for="item in listDropdown"
:key="item.id"
variant="normal py-2"
class="fs-12 fs-xl-15"
#click="selectItem(item, data)"
>
<span class="word-break text-line-clamp-1">{{ $t(item.text) }}</span>
</b-dropdown-item>
</b-dropdown>
</template>
<template #cell(selectCharacter)="data">
<b-dropdown
right
no-caret
variant="white"
class="minw--40 w-100"
menu-class="w-100 mh--24 overflow-auto minw-unset"
>
<template #button-content>
<div
class="flex-center minh--11 text-normal position-relative px-2"
>
<span class="pr-5 word-break text-line-clamp-1">{{ data.item.selectCharacter }}</span>
<i
class="fas fa-chevron-down position-absolute top-50 end--1 translate-middle-y px-2"
/>
</div>
</template>
<b-dropdown-item
v-for="item in listCharacter"
:key="item.id"
variant="normal py-2"
class="fs-12 fs-xl-15"
#click="selectCharacter(item, data)"
>
<span class="word-break text-line-clamp-1">{{ $t(item.text) }}</span>
</b-dropdown-item>
</b-dropdown>
</template>
<template #cell(inputCharacter)="data">
<input
v-model="data.item.inputCharacter"
type="text"
class="form-control h--11 border-0"
>
</template>
<template #cell(startPosition)="data">
<input
v-model="data.item.startPosition"
type="number"
class="form-control h--11 border-0"
>
</template>
<template #cell(characterCount)="data">
<input
v-model="data.item.characterCount"
type="number"
class="form-control h--11 border-0"
>
</template>
<template #cell(needReplace)="data">
<input
v-model="data.item.needReplace"
type="text"
class="form-control h--11 border-0"
>
</template>
<template #cell(replace)="data">
<input
v-model="data.item.replace"
type="text"
class="form-control h--11 border-0"
>
</template>
<template #cell(delete)="data">
<div class="flex-center pt-1">
<input
v-if="!data.item.isDrag"
v-model="data.item.delete"
type="checkbox"
>
</div>
</template>
</b-table>
Based on reading the documentation, the table component wasn't designed for this use case because you are adding icons that are outside of the table itself.
One alternative would be to use the grid system https://bootstrap-vue.org/docs/components/layout#layout-and-grid-system to create one narrow column on the left for the icons and one wide column on the right for the table. In the narrow column, you could create rows that are exactly the height of each row of the table so that the items stay aligned with each row.
Another alternative would be to use the #cell slot, and put an element inside that uses CSS, possibly the transform property (https://www.w3schools.com/cssref/css3_pr_transform.asp), to make the element appear to the left of where it really is.
i have simple questions list. It has some options and those options has some nested suboptions.
So need to keep hidden all nested checkboxes until checks parent checkbox.
i tried to do it but could not get it work.
i have tried this so far:
For better understanding please have a look at this fiddle
<div id="app">
<h2>Questions:</h2>
<ul>
<li v-for="question in questions">
<div class="question">{{ question.question }}</div>
<div class="label__wrap" v-for="option in question.options">
<label>
<input type="checkbox" v-model="question.answer" :value="option.option">
<span>
{{ option.option }}
</span>
</label>
<div class="sub__label__wrap" v-for="opt in option.subOptions">
<label>
<input type="checkbox" v-model="option.subOptsAnswers" :value=" opt.option">
<span>
{{ opt.option }}
</span>
</label>
</div>
</div>
<br><br>
</li>
</ul>
</div>
Thanks.
Updated Fiddle : https://jsfiddle.net/rcam67b9/
check the answers array whether the selected answer exist
v-if="question.answer.indexOf(option.option) !== -1"
Final Code
<div id="app">
<h2>Questions:</h2>
<ul>
<li v-for="question in questions">
<div class="question">{{ question.question }}</div>
<div class="label__wrap" v-for="option in question.options">
<label>
<input type="checkbox" v-model="question.answer" :value="option.option">
<span>
{{ option.option }}
</span>
</label>
<div class="sub__label__wrap" v-for="opt in option.subOptions" v-if="question.answer.indexOf(option.option) !== -1">
<label>
<input type="checkbox" v-model="option.subOptsAnswers" :value=" opt.option">
<span>
{{ opt.option }}
</span>
</label>
</div>
</div>
<br><br>
</li>
</ul>
</div>
Below is the example on which I want to check the validation(select at least one of the option).
<q-select
multiple
inverted
color="dark"
stack-label="Roles"
separator
v-model="multipleSelect"
:options="options1"
v-validate="'required|in:x-builder,rt-builder,commune,matrix,blade-runner,optocoupler,admin'"
/>
<div class="containerError"> <i v-show="errors.has('role')" class="fa fa-warning"></i>
<span v-show="errors.has('role')" class="text-negative text-right">{{ errors.first('role') }}</span>
</div>
In my component Search.vue I need to detect whether search input focused or not in order to hide search results if cursor is elsewhere
I used vue-instantsearch
Here is the code of my custome component's template section
<template>
<ais-index index-name="getstarted_actors" :search-store="searchStore">
<div class="col-md-10 col-sm-9">
<ais-search-box :autofocus="true">
<div class="input-group" ref="searchInputGroup">
<ais-input placeholder="Find books..."
:class-names="{'ais-input': 'form-control'}" autofocus="true" >
</ais-input>
<span class="input-group-btn">
<ais-clear :class-names="{'ais-clear': 'btn btn-default'}">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</ais-clear>
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
</div>
</ais-search-box>
<ais-results v-show="searchStore.query.length > 0">
<template scope="{ result }">
<div v-on:click="searchResultClick(result)" class="found-item">
<a> <span>{{ result.name }}</span> <span>{{ result.rating }}</span></a><br/>
</div>
</template>
</ais-results>
</div>
</ais-index>
</template>
You can try:
<ais-input placeholder="Find books..."
:class-names="{'ais-input': 'form-control'}" autofocus="true"
#focus="onFocus"
>
</ais-input>
and your methods:
methods: {
onFocus() { console.log('Focused') }
}