We Keep Coding

Prevent v-navigation-drawer from closing

Expected Behavior: 1. On initial render, the component should auto open the corresponding v-list-item's subgroup. 2. Then, on clicking an adjacent subgroup item, the nav drawer should remain opened to the subgroup the user has click on.
Problem: When performing 2, the entire nav drawer will close rather than the expected behavior.
I still need to keep the :value v-binds, but I believe the problem has something to do with preventing the #activator from propagating v-on when clicking an item.
Oddity: Any subsequent clicks on nav drawer items will result in normal behavior after experiencing the initial problem.
Any help would be appreciated if you've come across this problem before. Thank you!
<template>
<div>
<v-app>
<v-list>
<v-list-group
v-for="(subObjects, fruit) in items"
:key="fruit"
:value="fruit === 'orange'"
no-action
>
<template #activator>
<v-list-item-title>
{{ fruit }}
</v-list-item-title>
</template>
<template>
<v-list-group
v-for="object in subObjects"
:key="object.name"
:value="object.name === 'navel'"
no-action
sub-group
>
<template #activator>
<v-list-item-content>
<v-list-item-title>
{{ object.name }}
</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="year in object.dates"
:key="year"
>
<template #activator="{ on, attrs }">
<v-list-item-title v-bind="attrs" v-on="on">
{{ year }}
</v-list-item-title>
</template>
</v-list-item>
</v-list-group>
</template>
</v-list-group>
</v-list>
</v-app>
</div>
</template>
<script>
export default {
data() {
return {
items: {
apples: {
0: {
color: 'red',
name: 'fuji',
dates: ['2016', '2018'],
},
1: {
color: 'green',
name: 'granny smith',
dates: ['2020', '2021'],
}
},
oranges: {
0: {
color: 'orange',
name: 'navel',
dates: ['2022']
},
1: {
color: 'red orange',
name: 'blood orange',
dates: ['2015', '2017'],
}
},
}
};
},
};
</script>

Vue v-select problem with v-slot not showing text

I'm trying to display custom text in v-select options by slots.
Template:
<v-select v-model="dLevelSelected" :items="dLevels" solo>
<template slot="item" slot-scope="data">
<span>{{data.description}}</span>
</template>
</v-select>
Script:
data () {
return {
dLevelSelected: null,
dLevels: [{id:1, value: 1, description: 'Level1'}, {id:2, value: 2, description: 'Level2'}]
}
}
With this, when you open the v-select the two registers of dLevels are appearing as boxes but with any text. It seems like the data.description is being evaluated like data.undefined
Thanks!

slot and slot-scope are deprecated as of Vue 2.6.0.
The new slot syntax combines those two props into v-slot, so the equivalent item slot is:
<template v-slot:item="scope">
<span>{{ scope.item.description }}</span>
</template>
Note the scope contains an item property that can be used to access description. You can use object destructuring to simplify that to:
<template v-slot:item="{ item }">
<span>{{ item.description }}</span>
</template>
Similarly, you'll probably want a custom selection slot that renders the appearance of the selected item:
<template v-slot:selection="{ item }">
<span>{{ item.description }} ({{ item.value }})</span>
</template>
The final template should look similar to this:
<v-select v-model="dLevelSelected" :items="dLevels" solo>
<template v-slot:item="{ item }">
<span>{{ item.description }}</span>
</template>
<template v-slot:selection="{ item }">
<span>{{ item.description }} ({{ item.value }})</span>
</template>
</v-select>
demo

How to loop thought map and create specific object ? Using Javascript

All code you can find here: https://stackblitz.com/edit/angular-display-show-json-in-propertlu-format?file=src%2Fapp%2Fapp.component.ts
I have a problem formatting the array I'm loop through.
Main logic function is this:
this.allFilters.push(
Array.isArray(val.value)
? {
name: val.name,
value: val.value.map((obj: any) => obj.value).join(" - "),
displayName: val.displayName,
displayValue: val.value.map((obj: any) => obj.value).join(" - ")
}
: {
name: val.name,
value: val.value,
displayName: val.displayName,
displayValue: val.displayValue
}
);
Let me explain what I did here. Loop the thought array and push values. If it is array, the first condition goes, if it is not through, then the second.
Example of allFilters and val you can see on stackblitz and code bellow.
I loop thought array very simple:
<span
*ngFor="let filter of allFilters">
{{ filter.displayName }}: {{ filter.displayValue }}
</span>
If are you using VUE.js this is
<span
v-for="filter in allFilters" :key="filter.name>
{{ filter.displayName }}: {{ filter.displayValue }}
</span>
I need create object like a:
First: 2
Second: dateFrom 2021-04-08
Second: dateTo: 2021-04-20
Third: 15
The issue is not connected out for vue or angular or even reactions. This is js problem.

No need for such remappings, displaying logic should be usually in template, something like:
<span
*ngFor="let filter of allFilters"
class="badge badge-light my-3 mx-2 px-3 py-1">
<ng-container *ngIf="isArray(filter.value); else noArray">
<div *ngFor="let obj of filter.displayValue">
{{filter.displayName}}: {{obj.name}} {{obj.value}}
</div>
</ng-container>
<ng-template #noArray>
{{filter.displayName}}: {{filter.displayValue}}
</ng-template>
</span>
js:
isArray(value) {
return Array.isArray(value);
}
recieveMessage(val) {
this.allFilters.push(val);
}

It is possible to do it in template, like this:
<hello name="{{ name }}"></hello>
<div class="span">
<span
*ngFor="let filter of allFilters"
class="badge badge-light my-3 mx-2 px-3 py-1"
>
<ng-container *ngIf="filter.name != 'Second';else withDate">
{{ filter.displayName }}: {{ filter.displayValue }}
</ng-container>
<ng-template #withDate>
Second: dateFrom {{ filter.displayValue|slice:0:10 }}<br>
Second: dateTo: {{ filter.displayValue|slice:13:24 }}
</ng-template>
</span>
</div>

How to use object as a tag while using the Form Tags component in bootstrap vue

To explain the question, using the code from documentation as below:
<template>
<div>
<b-form-tags v-model="value" no-outer-focus class="mb-2">
<template v-slot="{ tags, inputAttrs, inputHandlers, addTag, removeTag }">
<b-input-group aria-controls="my-custom-tags-list">
<input
v-bind="inputAttrs"
v-on="inputHandlers"
placeholder="New tag - Press enter to add"
class="form-control">
<b-input-group-append>
<b-button #click="addTag()" variant="primary">Add</b-button>
</b-input-group-append>
</b-input-group>
<ul
id="my-custom-tags-list"
class="list-unstyled d-inline-flex flex-wrap mb-0"
aria-live="polite"
aria-atomic="false"
aria-relevant="additions removals"
>
<!-- Always use the tag value as the :key, not the index! -->
<!-- Otherwise screen readers will not read the tag
additions and removals correctly -->
<b-card
v-for="tag in tags"
:key="tag"
:id="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
tag="li"
class="mt-1 mr-1"
body-class="py-1 pr-2 text-nowrap"
>
<strong>{{ tag }}</strong>
<b-button
#click="removeTag(tag)"
variant="link"
size="sm"
:aria-controls="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
>remove</b-button>
</b-card>
</ul>
</template>
</b-form-tags>
</div>
</template>
<script>
export default {
data() {
return {
value: ['apple', 'orange', 'banana', 'pear', 'peach']
}
}
}
</script>
The above code gives the output as follows:
But when I have the values as an array of objects instead of short strings how to render the properties of the objects as tag elements?
for example: If I have value: [{name: 'apple', color: 'red'}, {name:'mango', color: 'yellow'}] then how to get the same output as above?
I tried something something like <strong>{{ tag.name }}</strong> and it doesn't work and gives me only empty tags to remove as follows:
Any ideas on how to achieve what I wanted to do here?

What you're trying to do is not support yet according to this issue
You'll have to map your array of objects to a string array and utilize that.
Then once you're ready to "use" your tags, you could map them back based on the original objects.
Here's a rather simple example of what could be done.
new Vue({
el: "#app",
computed: {
mappedTags() {
/* This is case sensitive */
return this.options.filter(option => this.value.includes(option.name))
}
},
data: {
value: [],
options: [{
name: 'Mango',
color: 'Orange'
},
{
name: 'Orange',
color: 'Orange'
},
{
name: 'Lemon',
color: 'Yellow'
},
{
name: 'Apple',
color: 'Red'
},
{
name: 'Banana',
color: 'Yellow'
},
]
}
})
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.4.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.2.2/dist/bootstrap-vue.js"></script>
<style>
/* Only added for better visibility on the text */
.text-stroke {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
</style>
<div id="app" class="p-3">
Valid (<b>Casesensitive</b>) tags - [Banana, Apple, Orange, Mango]
<b-form-tags v-model="value" no-outer-focus class="mb-2">
<template v-slot="{ tags, inputAttrs, inputHandlers, addTag, removeTag }">
<b-input-group aria-controls="my-custom-tags-list">
<b-input
v-bind="inputAttrs"
v-on="inputHandlers"
placeholder="New tag - Press enter to add"></b-input>
<b-input-group-append>
<b-button #click="addTag()" variant="primary">Add</b-button>
</b-input-group-append>
</b-input-group>
<ul class="list-unstyled d-inline-flex flex-wrap mb-0">
<b-card
v-for="tag in mappedTags"
:key="tag.name"
:id="`my-custom-tags-tag_${tag.name.replace(/\s/g, '_')}_`"
tag="li"
class="mt-1 mr-1"
body-class="py-1 pr-2 text-nowrap"
>
<strong :style="`color: ${tag.color}`" class="text-stroke">
{{ tag.name }}
</strong>
<b-button
#click="removeTag(tag.name)"
variant="link"
>
Remove
</b-button>
</b-card>
</ul>
</template>
</b-form-tags>
{{ mappedTags }}
</div>

Replace {{ tag.name }} with {{ JSON.parse(tag).name }}.
That should solve the problem.

You have a similar example where I needed the input of the user and its selection and gather does two inputs values inside an array of objects.
You need to add a v-model to your inputs this way you can pass it to a custom function
<b-form-input
v-model="werkTagNombre"
<b-form-select
v-model="werkTagExp"
...
"#click="addingWerkTag({werkTagNombre, werkTagExp})"
Complete template code
<b-form-tags v-model="freelance.tags.nombre">
<template v-slot="{ inputAttrs, inputHandlers }">
<b-input-group aria-controls="tags-list">
<b-form-input
v-model="werkTagNombre"
v-bind="inputAttrs"
v-on="inputHandlers"
placeholder="Seleccione"
class="werk-input werk-shadow-input mr-2"
>
</b-form-input>
<b-input-group-append>
<b-form-select
v-model="werkTagExp"
:options="experienciaOptions"
class="werk-input werk-shadow-input ml-2 mr-2"
>
</b-form-select>
</b-input-group-append>
<b-input-group-append>
<b-button class="shadow-none ml-2" style="border-radius:6px;"#click="addingWerkTag({werkTagNombre, werkTagExp})"> ADD</b-button>
</b-input-group-append>
</b-input-group>
<span style="font-size: 10px; color: #a5a5a5;">TAGS:</span>
<ul id="tags-list" class="list-unstyled d-inline-flex flex-wrap mb-0 mt-1">
<b-badge
v-for="(werkTag, index) in freelance.tags"
:key="index"
tag="li"
class="mx-1 my-1 werk-tags"
>
{{werkTag.nombre}} {{werkTag.experiencia}}
</b-badge>
</ul>
</template>
</b-form-tags>
Script
export default {
data() {
return {
freelance: {
tags: [
{
nombre:" Test name",
experiencia:1
}
],
}
...
werkTagNombre: '',
werkTagExp: '0',
experienciaOptions: [
{ value: '0', text: 'Selecciona'},
{ value: 1, text: 'menor a 2 años'},
{ value: 2, text: '3 a 5 años'},
{ value: 3, text: 'mayor a 5 años'},
]
...
methods:{
addingWerkTag(valor){
this.freelance.tags.push({nombre: valor.werkTagNombre, exp: valor.werkTagExp});
},
...
}
If you want you can also pass the addTag default function like this:
Inside the template slot add the functions like "addtag"
<template v-slot="{ inputAttrs, inputHandlers, addTag }">
...
So you can add it to your custom function like this:
#click="addingWerkTag({ werkTagNombre, werkTagExp, addTag })"

Display an object in Vue template

I have an object like:
Obj = {
'min_mix': 1,
'max_mix': 2,
'climbing': {
'easy':[
{
'hour': 1.0,
'id':0,
}
],
'height': [
{
'hour': 1.0,
'price': 100
}
]
}
}
I have to display this in my HTML:
min_mix : 1
max_mix : 2
climbing:
easy:
hour : 1.0
id : 0
height:
hour: 1.0
price: 100
For now I use some v-for, but I don't have a good result,
I don't understand how display correctly the array in easy and height?
https://jsfiddle.net/CanadianDevGuy/fjaoztgn/15/

Please check this https://jsfiddle.net/Lewvsp0k/
<v-card-text v-for='(value,name) in obj' :key='name' class="pt-0 pb-0">
<template v-if="typeof value !== 'object'">
<b>{{name}} : {{ value }} </b>
</template>
<template v-else>
<div v-for="(rowValue, rowIndex) in value" :key='rowIndex' class="mb-2 pa-0">
<b>{{name}} : </b>
<div v-for="(rowValue1, rowIndex1) in rowValue" :key='rowIndex1' class="mb-2 pa-0">
<b>{{rowIndex1}} : </b>
<div>
<div v-for="rowValue2 in rowValue1" :key='rowValue2' class="mb-2 pa-0">
<div v-for="(rowValue3, rowIndex3) in rowValue2" :key='rowValue3' class="mb-2 pa-0">
<b> {{rowIndex3}} : {{rowValue3}} </b>
</div>
</div>
</div>
</div>
</div>
</template>
</v-card-text>

Should work
<template v-for="(item, index) in Obj ">
<template v-if="typeof item !== Object">
<div :key="index">
{{ index }} : {{ item }}
</div>
</template>
<template v-else>
<div :key="'subitem' + indexSubItem" v-for="(subItem, indexSubItem) in item">
{{ indexSubItem }} : {{ subItem }}
</div>
</template>
</template>

The easiest way is to actually create a new component, say <object-entry>, that can perform iterative nesting logic: if the value it encounters is a string or number, we print it out directly; otherwise, we nest another level of <object-entry> in it.
The <object-entry> component (you can also rename it to anything you like, that makes more sense) will do the following:
always print the key from the key-value pair.
decide if it should print the value from the key-value pair:
if value is a typeof string/number, we print it
if value is not (then it is an array or object), we then call the component itself again (effectively nesting itself recursively)
In pseudo-code it looks like this:
<div>
<strong>{{ key }}</strong>:
<template v-if="isStringOrNumber(value)">
{{ value }}
</template>
<object-entry
v-else />
</div>
This ensures that we will keep indenting until we encounter the "bottommost" value that is either a number or string.
Note: You cannot truly get rid of the object index in the markup, due to the way your data is structured: if climbing is supposed to only contain 'easy' and 'height', they should not be double nested inside a meaningless key of 0. Likewise, for easy and height, it makes little sense they are stored as array of objects when it should be just an object itself.
See proof-of-concept here, with suggested changes to your data (you can also use your original data structure, but it will come with an extraneous level of nesting):
Vue.use(Vuetify);
Vue.component('object-entry', {
template: '#object-entry-template',
props: ['entryKey', 'entryValue'],
methods: {
isStringOrNumber: function(v) {
return typeof v === 'string' || typeof v === 'number';
}
}
})
var vm = new Vue({
el: "#app",
data: () => ({
obj: {
'min_mix': 1,
'max_mix': 1,
'climbing': {
'easy': {
'hour': 1.0,
'id': 0
},
'height': {
'hour': 1.0,
'price': 100.0
}
}
},
})
});
<link href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<object-entry
v-for="(value, key) in obj"
v-bind:key="key"
v-bind:entry-key="key"
v-bind:entry-value="value" />
</v-app>
</div>
<script type="text/x-template" id="object-entry-template">
<v-card-text class="pt-0 pb-0">
<strong>{{ entryKey }}</strong> :
<template v-if="isStringOrNumber(entryValue)">
{{ entryValue }}
</template>
<!-- Here, the component nests itself if value is not a string/number -->
<object-entry
v-else
v-for="(value, key) in entryValue"
v-bind:key="key"
v-bind:entry-key="key"
v-bind:entry-value="value" />
</v-card-text>
</script>