Vuetify set image background on navigation-drawer - vue.js

I'm using one of Vuetify's material template for learning. Its navigation-drawer has an image on the background like so:
I've looked at the code and the navigation-drawer has a v-imgcomponent that gives it the image:
<template>
<v-navigation-drawer
id="app-drawer"
v-model="inputValue"
app
dark
floating
persistent
mobile-break-point="991"
width="260">
<v-img :src="image" height="100%">
However what I cannot understand is that the src property is binded to an image attribute which I was expecting to find in the data function but its not there. The only other reference image is being applied is in the computed properties like so:
computed: {
...mapState("app", ["image", "color"]),
How is the image being applied or where the actual source for the image is located?

This is the vuetify material dashboard example app. You will find the image in teh vuex store.
More specifically - src/store/modules/app/state.js

Related

Change loader in Vuejs Component

I'm using this loader screen with vuejs as component, and i would like to put my own spinner.
I have tried to change it from source code but nothing happened. Anyone can help ?
Thank you.
This is the link :
vue-loading-overlay
What tried :
In : node_modules\vue-loading-overlay\src\loaders\dots.vue
<template>
<a><img src="spinner.png"></a>
</template>
But still dots show up instead of my spinner.png.
You SHOULD NEVER modify node_modules, because subsequent instals will erase your edits. I have found from the docs that this component accepts loader icon through default slot. Reference.
default : Replace the animated icon with yours
So just pass your image through default slot in your template.
<loading><img src="spinner.png"></loading>
Notice: provide valid path to your image.

Vuetify breakpoints not working in Nuxt.js

I'm working on a project using Nuxt.js as SSR engine and Vuetify as styling framework. In one of my templates I have such code:
<v-layout row wrap align-center
:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }">...</v-layout>
As you can see, I want to apply mb-4 class only if I am on small screens and smaller ones. But when I load this on desktop large screen and inspect element, this class is attached even though screen resolution does not match logic for applying this class. However, styling is back to expected when I resize browser window.
I've tried to manually dispatch 'resize' event in lifecycle hook:
mounted() {
window.dispatchEvent(new Event('resize'));
}
But it didn't help. Even if I wrap it in setTimeout, still no luck.
UPD: found a workaround, but still think it is not the best solution:
changed
:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"
to
:class="{ 'mb-4': isMounted && $vuetify.breakpoint.smAndDown }"
and in mounted lifecycle hook added: this.isMounted = true
UPDATE: while digging in Vuetify source code found out, that it checks window width with 200ms delay as window width check is costly operation. That is why we have delay.
you can give specific breakpoint for margin and padding attributes.
<v-layout row wrap align-center class="mb-sm-4">...</v-layout>
https://vuetifyjs.com/en/styles/spacing/#breakpoints

Is it possible to insert a text inside a <v-progress-linear /> (Vue.js / Vuetify)

I would like to insert a text inside a v-progress-linear element (code sample below).
Is that possible ? And if yes, how can it be done ?
<v-progress-linear
background-color="pink lighten-3"
color="pink lighten-1"
value="15"
>
</v-progress-linear>
Support for text inside v-progress-linear is coming in 1.5.
<v-progress-linear value="50" height="20" background-color="pink lighten-3" color="pink lighten-1">
<div>text inside</div>
</v-progress-linear>
Here's a pen using the current beta for 1.5 https://codepen.io/anon/pen/YBNxdW
Edit: Sorry! Just noticed you specifically wanted this for the linear, not the circular. My notes below will handle the circular case. Perhaps ironically, after figuring this out for the circular I ran into the Vuetify Dialog Loader example which I went with for this project. It does a nice job of presenting text with a linear progress bar as a modal window. That said, leaving my original answer below in case anyone happens to want to add text to the circular version.
Original post: You can achieve this in a roundabout way with something like this. For context, we have the progress element defined at the app level and are toggling its display from child components when we make API calls. The gist of what's happening is there is an app level property for "showWait" which is either empty or contains the text "Please wait...". That property is used for both the v-show and the value of the progress element.
<v-progress-circular v-show="showWait" color="accent" size="70" width="7" value="showWait" indeterminate>
{{ showWait }}
</v-progress-circular>
Using a defined "showWait" data property:
var app = new Vue({
el: '#app',
data: {
showWait: ''
},
methods: {
ToggleWait() {
if (this.showWait == '')
this.showWait = 'Please wait...';
else
this.showWait = '';
}
}
});

how to customise the bg-color of the menu in elementUI

In elementUI the default background-color is white ; when choosing the them:dark , it is black, but how can I customise the bg-color by myself?
I have tried to add the style property at the el-menu tag , but it didn't work
<el-menu style="{background-color: rgb(36,36,36)!important}"
I try to find the source code of the css file of el-menu tag and I try to change some setting relating to background-color, don't work either
the menu component just like
somebody told me I can code like this
<el-menu style="{backgroundColor: yello}.." but it didn't work
The class for that particular element is not modifiable, have a look:
:class="{
'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark',
'el-menu--collapse': collapse
}"
So your choices are:
Wrap it in a custom <div class="my-specific-selector and target it with .my-specific-selector .el-menu
Override the CSS for the dark theme
Copy + paste contents of component into your own file, adjust accordingly, use that instead.
you can try put background color directly like this
<el-menu
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
style="height: 61px;"
></el-menu>

Polymer 1.0 Data binding when object changes

I'm having trouble understanding how data-binding works now.
On my index page I've got an object (obtained as JSON from a RESTful service), which works just fine when applied to a custom element like:
<main-menu class="tiles-container ofvertical flex layout horizontal start"
menuitems="{{menuitems}}">
</main-menu>
var maintemplate = document.querySelector('#fulltemplate');
maintemplate.menuitems = JSON.parse(data.GetDesktopResult);
This works as expected, and when I load my page with different users, main-menu changes as it should to show each user's desktop configuration. (This menuitems object reflects position and size of each desktop module for each user).
Now, users used to be able to change their configuration on the go, and on Polymer 0.5 I had no problem with that, just changed my maintemplate.menuitems object and that was that, it was reflected on the template instantly.
As I migrated to Polymer 1.0, I realized changes on an object wouldn't change anything visible, it's much more complicated than this, but just doing this doesn't work:
<paper-icon-button id="iconback" icon="favorite" onClick="testing()"></paper-icon-button>
function testing(){
debugger;
maintemplate = document.querySelector('#fulltemplate');
maintemplate.menuitems[0][0].ModuleSize = 'smamodule';
}
The object changes but nothing happens on the screen until I save it to DB and reload the page.
Am I missing something /Do I need to do something else on Polymer 1.0 to have elements update when I change an object passed as a property?
Before you ask, I've got those properties setted as notify: true, it was the inly thing I found different, but still doesn't work
Thanks for reading!
EDIT:
this is the code menuitems is used in:
<template is="dom-repeat" items="{{menuitems}}" as="poscol">
<div class="positioncolum horizontal layout wrap flex">
<template is="dom-repeat" items="{{poscol}}" as="mitem" index-as="j">
<main-menu-item class$="{{setitemclass(mitem)}}"
mitem="{{mitem}}"
index="{{mitem.TotalOrder}}"
on-click="itemclick"
id$="{{setitemid(index, j)}}">
</main-menu-item>
</template>
</div>
</template>
main-menu-item is just set of divs which changes size and color based on this object properties
You need to use the mutation helper functions if you want to modify elements inside an object or array otherwise dom-repeat won't be notified about the changes (check the docs):
function testing(){
debugger;
maintemplate = document.querySelector('#fulltemplate');
this.set('maintemplate.0.0.ModuleSize', 'smamodule');
}