I am trying to store some menus and submenus . But when I check a menu/submenu from checkbox, it's showing true/false. I want to get the values of the checked menu/ submenu. Here is a portion of my code(it will not work if you run it)
import { reactive, ref } from "vue";
const menuAside:[
{
to: "/dashboard",
label: "Dahsboard",
},
{
label: "User Manage",
menu: [
{
to: "/register",
label: "New User",
},
{
to: "/alluser",
label: "All User",
},
{
to: "/users/authorities",
label: "Authorities",
},
{
to: "/users/dealers",
label: "Dealers",
},
{
to: "/users/sub-dealers",
label: "Sub Dealers",
},
{
to: "/users/retailers",
label: "Retailer",
},
{
to: "/users/employees",
label: "Employees",
},
],
},
]
const fromInputs = reactive({
name: '',
selectedMenu: [],
});
fromInputs.selectedMenu = menuAside.map(menu => ({
label: menu.label,
selectedSubmenu: menu.menu
? menu.menu.map(submenu => ({ label: submenu.label }))
: [],
}));
<!-- Include the library in the page -->
<script src="https://unpkg.com/vue#2.2.0-beta.1/dist/vue.js"></script>
<!-- App -->
<div id="app">
<div>
<div v-for="menu in menuAside">
<div>
<input type="checkbox" :value="menu.label" v-model="fromInputs.selectedMenu[menuAside.indexOf(menu)].label">{{menu.label}}
</div>
<div v-if="menu.menu">
<div v-for="submenu in menu.menu">
<input type="checkbox" :value="submenu.label" v-model="fromInputs.selectedMenu[menuAside.indexOf(menu)].selectedSubmenu[menu.menu.indexOf(submenu)].label">{{submenu.label}}
</div>
</div>
</div>
</div>
</div>
In the above snippet, I can't get the "value". I want to get "products" menu if check "products". not boolean ture.
Related
I have a menu and would like to highlight the currently active menu item.
I think I should write in the first template the following: v-if(selected) and some function maybe.
<template>
<MenuTreeView #selected='collapsedMenuSelected' :items='filteredFirstLevelNavigation' :filter="false"/>
</template>
MenuTreeView:
<template>
<Tree :value="items" filterPlaceholder="Suche" :expandedKeys="expandedKeys" filterMode="lenient" :filter="filter"
selectionMode="single" #nodeSelect="onNodeSelect"></Tree>
</template>
In such cases, you need to store the id of the active element in the data of the parent component. This can be done by saving the id when selecting one of the rows.
Parent
<template>
<div class="menu">
<MenuItem
v-for="row in rows"
:active-id="activeId"
:key="row.id"
#select="handleSelect"
/>
</div>
</template>
<script>
import MenuItem from "./MenuItem";
export default {
name: "TheMenu",
components: {
MenuItem,
},
data() {
return {
activeId: null,
rows: [
{
id: 1,
label: "First",
},
{
id: 2,
label: "Second",
},
{
id: 3,
label: "Third",
},
],
};
},
methods: {
handleSelect(id) {
this.activeId = id;
},
},
};
</script>
Child
<template>
<div
class="menu-item"
:class="{
'menu-item_active': activeId === row.id,
}"
#click="handleSelect"
>
{{ row.label }}
</div>
</template>
<script>
export default {
name: "MenuItem",
props: {
row: {
type: Object,
required: true,
},
activeId: {
type: Number,
required: true,
},
},
methods: {
handleSelect() {
this.$emit("select", this.row.id);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.menu-item {
/* your styles */
display: flex;
width: 100%;
}
.menu-item_active {
background-color: red;
}
</style>
I'm trying to pass data from vue component to vue view file. I tried creating props but it didn't work. I have one component file on path src/components/list.vue and another file on path src/views/select.vue
The flow goes like this: User lands on select.vue page, here on click of input box a pop-up appears which have have list of elements in <ul> <li> tag from list.vue (component file).
What I want to achieve:
Whenever user select any option from list.vue file, modal pop-up should close and selected element should be displayed in input box of select.vue file.
Below is code:
src/views/select.vue
<label class="primary-label mb-2">First Question</label>
<div class="form-block">
<label class="secondary-label mb-1">Question</label>
<b-form-input placeholder="Select Question" v-model="questions.first" class="form-control l-input" #click="onOptionChanged"></b-form-input>
</div>
<div class="form-block">
<label class="secondary-label mb-1">Answer</label>
<b-form-input v-model="answers.first" placeholder="Enter answer" class="form-control l-input"></b-form-input>
</div>
<script>
export default {
data() {
return {
questions: {
first: null,
},
answers: {
first: null,
},
options: [
{ value: null, text: 'Select Question', disabled:true },
{ value: 1, text: 'In what city were you born?' },
{ value: 2, text: 'What is the name of your favorite pet?' },
{ value: 3, text: 'What is your mother\'s maiden name?' },
{ value: 4, text: 'What high school did you attend?' },
{ value: 5, text: 'What is the name of your first school?' },
{ value: 6, text: 'What was the make of your first car?' },
{ value: 7, text: 'What was your favorite food as a child?' },
{ value: 8, text: 'Where did you meet your spouse?' },
],
}
},
methods: {
onOptionChanged() {
var modal_ref = 'myModalRef';
this.$refs[modal_ref].show();
},
},
components: {
SecurityQuestionsList,
},
}
src/components/list.vue
<template>
<main>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="search-block">
<span class="s-icon fa fa-search"></span>
</div>
<ul class="l-group" v-if="filteredQuestions.length > 0">
<li class="d-flex align-items-center" :key="item.id" v-for="item in filteredQuestions" #click="onOptionSelect(item.question)"
:class="selected === item.id ? 'my-selected-item-class':null">
{{item.question}}
</li>
</ul>
</div>
</div>
</div>
</main>
</template>
<script>
export default {
data() {
return {
search: '',
selected: null,
questions: [
{ id: 1, question: 'In what city were you born?' },
{ id: 2, question: 'What is the name of your favorite pet?' },
{ id: 3, question: 'What is your mother\'s maiden name?' },
{ id: 4, question: 'What high school did you attend?' },
{ id: 5, question: 'What is the name of your first school?' },
{ id: 6, question: 'What was the make of your first car?' },
{ id: 7, question: 'What was your favorite food as a child?' },
{ id: 8, question: 'Where did you meet your spouse?' },
],
}
},
computed: {
filteredQuestions() {
return this.questions.filter(item => {
return item.question.toLowerCase().includes(this.search.toLowerCase());
});
}
},
methods: {
onOptionSelect(selectedId) {
this.selected = selectedId;
console.log(this.selected);
this.$emit('questions-selected', this.selected);
},
}
}
</script>
I am getting selected value in console but not sure how to catch it in search.vue file.
Thanks!
You need to connect your components and pass props, try like following snippet:
Vue.component('list', {
template: `
<main>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="search-block">
<span class="s-icon fa fa-search"></span>
</div>
<ul class="l-group" v-if="filteredQuestions.length > 0">
<li class="d-flex align-items-center" :key="item.id" v-for="item in filteredQuestions" #click="onOptionSelect(item.question)"
:class="selected === item.id ? 'my-selected-item-class':null">
{{item.question}}
</li>
</ul>
</div>
</div>
</div>
</main>
`,
props: ['search'],
data() {
return {
selected: null,
questions: [
{ id: 1, question: 'In what city were you born?' },
{ id: 2, question: 'What is the name of your favorite pet?' },
{ id: 3, question: 'What is your mother\'s maiden name?' },
{ id: 4, question: 'What high school did you attend?' },
{ id: 5, question: 'What is the name of your first school?' },
{ id: 6, question: 'What was the make of your first car?' },
{ id: 7, question: 'What was your favorite food as a child?' },
{ id: 8, question: 'Where did you meet your spouse?' },
],
}
},
computed: {
filteredQuestions() {
if (this.search) {
return this.questions.filter(item => {
return item.question.toLowerCase().includes(this.search.toLowerCase());
});
} return this.questions
}
},
methods: {
onOptionSelect(selectedId) {
this.selected = selectedId;
this.$emit('questions-selected', selectedId);
},
}
})
new Vue({
el: "#demo",
name: 'select',
data() {
return {
questions: {
first: null,
},
answers: {
first: null,
},
selected: false
}
},
methods: {
onOptionChanged() {
this.selected = true
},
onSelected(val) {
this.questions.first = val
this.selected = false
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
<div>
<label class="primary-label mb-2">First Question</label>
<div class="form-block">
<label class="secondary-label mb-1">Question</label>
<b-form-input placeholder="Select Question" v-model="questions.first" class="form-control l-input" #click="onOptionChanged()"></b-form-input>
</div>
<div class="form-block">
<label class="secondary-label mb-1">Answer</label>
<b-form-input v-model="answers.first" placeholder="Enter answer" class="form-control l-input"></b-form-input>
<list :search="questions.first" #questions-selected="onSelected" v-if="selected"></list>
</div>
</div>
</div>
<a-radio-group
#change="changeName"
v-decorator="[
'name',
{ initialValue: 'light' },
]"
>
<a-radio value="iphone">Iphone</a-radio>
<a-radio value="samsung">Samsung</a-radio>
</a-radio-group>
<a-form-item label="Value" :colon="false">
<a-select placeholder="Select a value">
<a-select-option></a-select-option>
</a-select>
</a-form-item>
methods: {
changeName(event) {
var value = event.target.value;
if (value == 'iphone') {
// I want to assign the select-option the value :
//<a-select-option value="ip12">Iphone 12</a-select-option>
// <a-select-option value="ip13">Iphone 13</a-select-option>
} else {
//<a-select-option value="ss10">Samsung note 10</a-select-option>
// <a-select-option value="ss9">Samsung note 9</a-select-option>
}
}
}
How do I change the <a-select-option>s when I select a radio button?
You can compute the <a-select>'s options based on the <a-radio-group>'s value.
Instead of the change-event handler, use a v-model directive on the <a-radio-group> to store the selected brand, and on the <a-select> to store the selected phone:
<template>
<a-radio-group v-model="selectedBrand">
<!-- brands -->
</a-radio-group>
<a-select placeholder="Select a value" v-model="selectedPhone">
<!-- phone options -->
</a-select>
</template>
<script>
export default {
data () {
return {
selectedBrand: '',
selectedPhone: '',
}
}
}
</script>
Add a computed property for the options to show based on the selected brand:
const PHONE_OPTIONS = {
iphone: [
{ value: 'iph12', label: 'Iphone 12' },
{ value: 'iph13', label: 'Iphone 13' },
],
samsung: [
{ value: 'ss10', label: 'Samsung Note 10' },
{ value: 'ss9', label: 'Samsung Note 9' },
],
}
export default {
computed: {
phoneOptions() {
return PHONE_OPTIONS[this.selectedBrand]
},
},
}
Use a watcher on the phone options to automatically select the first one.
export default {
watch: {
phoneOptions(value) {
this.selectedPhone = value?.[0].value
},
},
}
Render the phone options:
<a-select-option v-for="opt in phoneOptions" :key="opt.value" :value="opt.value">
{{ opt.label }}
</a-select-option>
demo
Hi is it possible to abbreviate dropdown names when selected like the figure below
this is my code :
multiValue: [
{ value: "BUF", label: "BUF" },
{ value: "CCT", label: "CCT" },
{ value: "JHB", label: "JHB" },
{ value: "EKH", label: "EKH" },
{ value: "ETK", label: "ETK" },
{ value: "MAN", label: "MAN" },
{ value: "NMB", label: "NMB" },
{ value: "TSH", label: "TSH" }
],
handleMultiChange(option) {
this.setState({multiValue: option});
}
<Select
id='multiple'
name="filters"
placeholder="Filter City"
value={this.state.multiValue}
options={this.state.filterOptions}
onChange={this.handleMultiChange}
isMulti={this.state.isMulti}
styles={style}
/>
You could accomplish this by providing a custom MultiValueLabel component
MultiValueLabel.component.js
export default function MultiValueLabel({
data,
innerProps,
selectProps
}) {
// ...any logic you might need
// 'data' should be the full object of each selected item
// so reference whatever key is necessary
return (
<div {...innerProps}>
{data.abbr}
</div>
)
}
Then you just pass that in
<Select
components={{
MultiValueLabel
}}
... other props
/>
While using angular ui grid we are using selectOptions to populate dropdown options as column filter. Something similar to the following code:
angular.module('exampleApp', ['ui.grid'])
.controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
var animals = [
{ id: 1, type: 'Mammal', name: 'Elephant' },
{ id: 2, type: 'Reptile', name: 'Turtle' },
{ id: 3, type: 'Mammal', name: 'Human' }
];
var animalTypes = [
{ value: 'Mammal', label: 'Mammal' },
{ value: 'Reptile', label: 'Reptile'}
];
$scope.animalGrid = {
enableFiltering: true,
columnDefs: [
{
name: 'type',
field: 'type',
filter: { selectOptions: animalTypes, type: uiGridConstants.filter.SELECT }
},
{ name: 'name', name: 'name'}
],
data: animals
};
}]);
<link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<div ng-app="exampleApp">
<div ng-controller="exampleCtrl">
<h1>UI Grid Dropdown Filter Example</h1>
<div ui-grid="animalGrid" class="grid"></div>
</div>
</div>
This shows dropdown filter options for each column but with an extra empty option. How do I remove the empty/blank option or replace the empty/blank option with a 'All' text?
You can achieve this using a custom filter.
For your code snippet you would need to change the label property in animalTypes to id, and also add an option of 'All':
var animalTypes = [
{ value: 'All', id: '' },
{ value: 'Mammal', id: 'Mammal' },
{ value: 'Reptile', id: 'Reptile'}
];
Then modify the columnDef for the type column as follows:
columnDefs: [
{
name: 'type',
field: 'type',
// template for rendering a custom dropdown box
filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-dropdown></div></div>',
filter: {
// initialize the filter to 'All'
term: '',
// the dropdown options (used in the custom directive)
options: animalTypes
}
},
...
],
Please note that you will need to use the filter.term property to initialize the filter to 'All'. If you don't you will find that a blank option is inserted at the top of the dropdown box when the grid loads. Initializing the drop down prevents this from happening.
You can then define a custom drop down directive to render a select box containing the animalTypes options:
app.directive('myCustomDropdown', function() {
return {
template: '<select class="form-control" ng-model="colFilter.term" ng-options="option.id as option.value for option in colFilter.options"></select>'
};
});
Please see this Fiddle for a working example