Develop Reference

Displaying image component from inside a list. How do you do this?

I hope you could help me out.
Before going through the code, let me quickly explain what I want:
I have two components that I use for uploading and displaying images. I have FileResourceService that is used for uploading, and FileResourceImage which is used for storing and displaying the data. These work together with a v-model called profilePictureFileResourceId which basically just ties the images to specific users on the page, depending on who is logged on.
When displaying the image on a template, it is very straightforward. I just grab the FileResourceImage component and tie it with the v-model.
<file-resource-image v-model="form.user.profilePictureFileResourceId" can-upload style="width: 100px; height: 100px;" />
That is all very easy, but I have some pages where I use tables that contain information about my users, and I would like for the user’s profile images to actually be displayed in the table. Here is an example of a list used for the table.
fields() {
return [
{
key: "email",
label: this.$t('email'),
sortable: true,
template: {type: 'email'}
},
{
key: "name",
label: this.$t('name'),
sortable: true
},
{
key: 'type',
label: this.$t('type'),
formatter: type => this.$t(`model.user.types.${type}`),
sortable: true,
sortByFormatted: true,
filterByFormatted: true
},
{
key: 'status',
label: this.$t('status'),
formatter: type => this.$t(`model.user.status.${type}`),
sortable: true,
sortByFormatted: true,
filterByFormatted: true
},
{
key: "actions",
template: {
type: 'actions',
head: [
{
icon: 'fa-plus',
text: 'createUser',
placement: 'left',
to: `/users/add`,
if: () => this.$refs.areaAuthorizer.fullControl
}
],
cell: [
{
icon: 'fa-edit',
to: data => `/users/${data.item.id}/edit`
}
]
}
I know that I cannot just make an array that looks like this:
fields() {
return [
{
<file-resource-image v-model="form.user.profilePictureFileResourceId" can-upload />
}
]
}
So how would you make the component display from within in the list? I believe it can be done with props, but I am totally lost at what to do.
By the way, these are the two components I use for uploading and display. I thought I might as well show them, so you can get an idea of what they do.
For upload:
import axios from '#/config/axios';
import utils from '#/utils/utils';
export const fileResourceService = {
getFileResource(fileResourceId) {
return axios.get(`file/${fileResourceId}`);
},
getFileResourceFileContent(fileResourceId) {
return axios.get(`file/${fileResourceId}/download`, {responseType: 'arraybuffer', timeout: 0});
},
downloadFileResource(fileResourceId) {
return fileResourceService.getPublicDownloadToken(fileResourceId)
.then(result => fileResourceService.downloadPublicTokenFile(result.data));
},
downloadPublicTokenFile(fileResourcePublicDownloadTokenId) {
const tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href =
`${axios.defaults.baseURL}/file/public/${fileResourcePublicDownloadTokenId}/download`;
tempLink.setAttribute('download', '');
document.body.appendChild(tempLink);
tempLink.click();
setTimeout(() => document.body.removeChild(tempLink), 0);
},
getPublicDownloadToken(fileResourceId) {
return axios.get(`file/${fileResourceId}/public-download-token`);
},
postFileResource(fileResource, file) {
return axios.post(`file`, utils.toFormData([
{name: 'fileResource', type: 'json', data: fileResource},
{name: 'file', data: file}
]), {timeout: 0});
}
};
Then we have the component that is used for DISPLAYING the images:
<template>
<div :style="style" #click="upload" style="cursor: pointer;">
<div v-if="url === null">
<i class="fas fa-camera"></i>
</div>
<div v-if="canUpload" class="overlay">
<i class="fas fa-images"></i>
</div>
</div>
</template>
<script>
import {fileResourceService} from '#/services/file-resource';
import utils from '#/utils/utils';
export default {
model: {
prop: 'fileResourceId',
event: 'update:fileResourceId'
},
props: {
fileResourceId: String,
canUpload: Boolean,
defaultIcon: {
type: String,
default: 'fas fa-camera'
}
},
data() {
return {
url: null
};
},
computed: {
style() {
return {
backgroundImage: this.url && `url(${this.url})`,
backgroundSize: 'contain',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
};
}
},
methods: {
upload() {
if(this.canUpload) {
utils.openFileDialog()
.then(([file]) => fileResourceService.postFileResource({}, file))
.then(result => this.$emit('update:fileResourceId', result.data.id))
.catch(() => this.$bvModalExt.msgBoxError())
}
}
},
watch: {
fileResourceId: {
immediate: true,
handler() {
this.url = null;
if (this.fileResourceId) {
fileResourceService.getFileResourceFileContent(this.fileResourceId).then(result => {
const reader = new FileReader();
reader.onload = event => this.url = event.target.result;
reader.readAsDataURL(new Blob([result.data]));
});
}
}
}
}
};
</script>

Vuejs Loses its #click binding handler when toggled on and off with v-if

I am working with vue-leaflet and esri-leaflet
I am rendering two seperate ESRIFeatureLayers in one vue component and switching between them via a v-if. on first page load. the map #click handlers work fine. but once they have been toggled off via v-if the click handlers no longer fire
This is the vue component
<LLayerGroup
name="Zones"
layer-type="overlay"
>
<EsriFeatureLayer v-if="this.hydroUnit === GROUNDWATER"
ref="gw-layer"
:url="GW_FEATURES_URL"
:token="ARCGIS_TOKEN"
:style-function="gwStyle"
:simplify-factor="0.5"
#mouseover="mouseover"
#mouseout="mouseout"
#click="clickGW"
#featureLayer="updateFeatureLayer"
/>
<LMarker v-if="markerLatLng"
name="clickMarker"
:lat-lng="markerLatLng">
<LTooltip :options="{ permanent: true }">{{ Markertooltip }}</LTooltip>
</LMarker>
<EsriFeatureLayer v-if="this.hydroUnit === SURFACE_WATER && this.sWSitesColors.length > 0"
ref="sw-layer"
:url="SW_FEATURES_URL"
:token="ARCGIS_TOKEN"
:style-function="swStyle"
:simplify-factor="0.5"
#mouseover="mouseover"
#mouseout="mouseout"
#click="clickSW"
#layerClicked="clickSW"
#featureLayer="updateFeatureLayer"
/>
</LLayerGroup>
this is the ESRIFeatureLayer plugin component
<template>
<div style="display: none;">
<slot #click="$event('layerClicked')" v-if="ready" />
</div>
</template>
<script>
import { findRealParent, propsBinder } from 'vue2-leaflet'
import { featureLayer } from 'esri-leaflet'
import * as L from 'leaflet'
const props = {
url: {
type: String,
required: true,
},
styleFunction: {
type: Function,
default: undefined,
},
simplifyFactor: {
type: Number,
default: undefined,
},
precision: {
type: Number,
default: undefined,
},
visible: {
type: Boolean,
default: true,
},
layerType: {
type: String,
default: undefined,
},
name: {
type: String,
default: undefined,
},
token: {
type: String,
default: undefined,
},
pane: {
type: String,
default: undefined,
},
}
export default {
name: 'EsriFeatureLayer',
props,
data () {
return {
ready: false,
}
},
watch: {
styleFunction (newVal) {
this.mapObject.setStyle(newVal)
},
url (newVal) {
this.parentContainer.removeLayer(this)
this.setOptions()
this.parentContainer.addLayer(this, !this.visible)
},
},
mounted () {
this.setOptions()
L.DomEvent.on(this.mapObject, this.$listeners)
propsBinder(this, this.mapObject, props)
this.ready = true
this.parentContainer = findRealParent(this.$parent)
this.parentContainer.addLayer(this, !this.visible)
},
beforeDestroy () {
this.parentContainer.removeLayer(this)
},
methods: {
setVisible (newVal, oldVal) {
if (newVal === oldVal) return
if (newVal) {
this.parentContainer.addLayer(this)
} else {
this.parentContainer.removeLayer(this)
}
},
setOptions () {
const options = {}
if (this.url) {
options.url = this.url
}
if (this.styleFunction) {
options.style = this.styleFunction
}
if (this.simplifyFactor) {
options.simplifyFactor = this.simplifyFactor
}
if (this.precision) {
options.precision = this.precision
}
if (this.token) {
options.token = this.token
}
if (this.pane) {
options.pane = this.pane
}
this.mapObject = featureLayer(options)
this.$emit('featureLayer', this.mapObject)
},
updateVisibleProp (value) {
this.$emit('update:visible', value)
},
},
}
</script>
I have tried adding a event click handler as you can see with #click="$event('layerClicked')"
but no click event is firing once they have been toggled off once.
how do i re-bind the #click handler to the ESRIFeatureLayer if a component is re-shown via the v-if binding?

I found a fix
all i had to do was re-initialize the listeners when a watched property (url) was changed on the child component
Parent
<EsriFeatureLayer
:url="this.hydroUnit === GROUNDWATER ? GW_FEATURES_URL : SW_FEATURES_URL"
:token="ARCGIS_TOKEN"
:style-function="this.hydroUnit === GROUNDWATER ? gwStyle : swStyle"
:simplify-factor="0.5"
#mouseover="mouseover"
#mouseout="mouseout"
#click="click"
#featureLayer="updateFeatureLayer"
/>
ternary operator changed the URL when the hydrounit is changed
the watched url variable in ESRIFeatureLayer re-inits the listeners
watch: {
styleFunction (newVal) {
this.mapObject.setStyle(newVal)
},
url (newVal) {
this.parentContainer.removeLayer(this)
this.setOptions()
this.parentContainer.addLayer(this, !this.visible)
L.DomEvent.on(this.mapObject, this.$listeners)
},
},
mounted () {
this.setOptions()
L.DomEvent.on(this.mapObject, this.$listeners)
propsBinder(this, this.mapObject, props)
this.ready = true
this.parentContainer = findRealParent(this.$parent)
this.parentContainer.addLayer(this, !this.visible)
},

V-model is not listening to value change for an input (vuejs)

I have an object property which could listen to the user input or could be changed by the view.
With the snipped below :
if I typed something the value of my input is updated and widget.Title.Name is updated.
if I click on the button "External Update", the property widget.Title.Name is updated but not the value in my field above.
Expected result : value of editable text need to be updated at the same time when widget.Title.Name change.
I don't understand why there are not updated, if I inspect my property in vue inspector, all my fields (widget.Title.Name and Value) are correctly updated, but the html is not updated.
Vue.component('editable-text', {
template: '#editable-text-template',
props: {
value: {
type: String,
default: '',
},
contenteditable: {
type: Boolean,
default: true,
},
},
computed: {
listeners() {
return { ...this.$listeners, input: this.onInput };
},
},
mounted() {
this.$refs["editable-text"].innerText = this.value;
},
methods: {
onInput(e) {
this.$emit('input', e.target.innerText);
}
}
});
var vm = new Vue({
el: '#app',
data: {
widget: {
Title: {
Name: ''
}
}
},
async created() {
this.widget.Title.Name = "toto"
},
methods: {
externalChange: function () {
this.widget.Title.Name = "changed title";
},
}
})
button{
height:50px;
width:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<editable-text v-model="widget.Title.Name"></editable-text>
<template>Name : {{widget.Title.Name}}</template>
<br>
<br>
<button v-on:click="externalChange">External update</button>
</div>
<template id="editable-text-template">
<p ref="editable-text" v-bind:contenteditable="contenteditable"
v-on="listeners">
</p>
</template>
I searched a lot of subject about similar issues but they had reactivity problem, I think I have a specific problem with input. Have you any idea of what's going on ? I tried to add a listener to change event but it was not triggered on widget.Title.Name change.

To anwser to this problem, you need to do 3 differents things.
Add watch property with the same name as your prop (here value)
Add debounce function from Lodash to limit the number of request
Add a function to get back the cursor (caret position) at the good position when the user is typing
For the third point : when you change the value of widget.Title.Name, the component will re-render, and the caret position will be reinitialize to 0, at the beginning of your input. So, you need to re-update it at the last position or you will just write from right to left.
I have updated the snippet above with my final solution.
I hope this will help other people coming here.
Vue.component('editable-text', {
template: '#editable-text-template',
props: {
value: {
type: String,
default: '',
},
contenteditable: {
type: Boolean,
default: true,
},
},
//Added watch value to watch external change <-> enter here by user input or when component or vue change the watched property
watch: {
value: function (newVal, oldVal) { // watch it
// _.debounce is a function provided by lodash to limit how
// often a particularly expensive operation can be run.
// In this case, we want to limit how often we update the dom
// we are waiting for the user finishing typing his text
const debouncedFunction = _.debounce(() => {
this.UpdateDOMValue();
}, 1000); //here your declare your function
debouncedFunction(); //here you call it
//not you can also add a third argument to your debounced function to wait for user to finish typing, but I don't really now how it works and I didn't used it.
}
},
computed: {
listeners() {
return { ...this.$listeners, input: this.onInput };
},
},
mounted() {
this.$refs["editable-text"].innerText = this.value;
},
methods: {
onInput(e) {
this.$emit('input', e.target.innerText);
},
UpdateDOMValue: function () {
// Get caret position
if (window.getSelection().rangeCount == 0) {
//this changed is made by our request and not by the user, we
//don't have to move the cursor
this.$refs["editable-text"].innerText = this.value;
} else {
let selection = window.getSelection();
let index = selection.getRangeAt(0).startOffset;
//with this line all the input will be remplaced, so the cursor of the input will go to the
//beginning... and you will write right to left....
this.$refs["editable-text"].innerText = this.value;
//so we need this line to get back the cursor at the least position
setCaretPosition(this.$refs["editable-text"], index);
}
}
}
});
var vm = new Vue({
el: '#app',
data: {
widget: {
Title: {
Name: ''
}
}
},
async created() {
this.widget.Title.Name = "toto"
},
methods: {
externalChange: function () {
this.widget.Title.Name = "changed title";
},
}
})
/**
* Set caret position in a div (cursor position)
* Tested in contenteditable div
* ##param el : js selector to your element
* ##param caretPos : index : exemple 5
*/
function setCaretPosition(el, caretPos) {
var range = document.createRange();
var sel = window.getSelection();
if (caretPos > el.childNodes[0].length) {
range.setStart(el.childNodes[0], el.childNodes[0].length);
}
else
{
range.setStart(el.childNodes[0], caretPos);
}
range.collapse(true);
sel.removeAllRanges();
}
button{
height:50px;
width:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<editable-text v-model="widget.Title.Name"></editable-text>
<template>Name : {{widget.Title.Name}}</template>
<br>
<br>
<button v-on:click="externalChange">External update</button>
</div>
<template id="editable-text-template">
<p ref="editable-text" v-bind:contenteditable="contenteditable"
v-on="listeners">
</p>
</template>

you can use $root.$children[0]
Vue.component('editable-text', {
template: '#editable-text-template',
props: {
value: {
type: String,
default: '',
},
contenteditable: {
type: Boolean,
default: true,
},
},
computed: {
listeners() {
return {...this.$listeners, input: this.onInput
};
},
},
mounted() {
this.$refs["editable-text"].innerText = this.value;
},
methods: {
onInput(e) {
this.$emit('input', e.target.innerText);
}
}
});
var vm = new Vue({
el: '#app',
data: {
widget: {
Title: {
Name: ''
}
}
},
async created() {
this.widget.Title.Name = "toto"
},
methods: {
externalChange: function(e) {
this.widget.Title.Name = "changed title";
this.$root.$children[0].$refs["editable-text"].innerText = "changed title";
},
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
<editable-text v-model="widget.Title.Name"></editable-text>
<template>Name : {{widget.Title.Name}}</template>
<br>
<br>
<button v-on:click="externalChange">External update</button>
</div>
<template id="editable-text-template">
<p ref="editable-text" v-bind:contenteditable="contenteditable" v-on="listeners">
</p>
</template>
or use Passing props to root instances
Vue.component('editable-text', {
template: '#editable-text-template',
props: {
value: {
type: String,
default: '',
},
contenteditable: {
type: Boolean,
default: true,
},
},
computed: {
listeners() {
return {...this.$listeners, input: this.onInput
};
},
},
mounted() {
this.$refs["editable-text"].innerText = this.value;
this.$root.$on("titleUpdated",(e)=>{
this.$refs["editable-text"].innerText = e;
})
},
methods: {
onInput(e) {
this.$emit('input', e.target.innerText);
}
}
});
var vm = new Vue({
el: '#app',
data: {
widget: {
Title: {
Name: ''
}
}
},
async created() {
this.widget.Title.Name = "toto"
},
methods: {
externalChange: function(e) {
this.widget.Title.Name = "changed title";
this.$root.$emit("titleUpdated", this.widget.Title.Name);
},
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
<editable-text v-model="widget.Title.Name"></editable-text>
<template>Name : {{widget.Title.Name}}</template>
<br>
<br>
<button v-on:click="externalChange">External update</button>
</div>
<template id="editable-text-template">
<p ref="editable-text" v-bind:contenteditable="contenteditable" v-on="listeners">
</p>
</template>

Trying to set Vue Meta page title using string + variable

I'm using Vue Meta as part of a blog application within a project using Nuxt JS 2.4.5
I'm having some trouble trying to set the title + a variable from data () and I'm not sure what I'm missing
I've tried multiple attempts at getting it to work, moving code around, using this setting it manually, nothing seems to work...
<script>
import BlogsFromJson from '~/static/articles/blogs.json';
export default {
head: {
title: 'My Website: Blog: ' + this.myBlogTitle, // or something else
meta: [
{ hid: 'description', name: 'description', content: 'Read the latest news and articles from Flex Repay UK.' }
]
},
data () {
return {
title: this.$route.params.title,
blog: BlogsFromJson,
myBlogTitle: 'some title'
}
}
}
</script>
I've tried setting a variable within data () and using it statically.
Doing this should give me My Website: Blog: some title
What could I be missing here?

Try to use function instead of object for head.
Change
head: {
...
},
to
head () {
return {
...
}
}

Instead of defining metaInfo as an object, define it as a function and access this as usual:
Post.vue:
<template>
<div>
<h1>{{{ title }}}</h1>
</div>
</template>
your script
<script>
export default {
name: 'post',
props: ['title'],
data () {
return {
description: 'A blog post about some stuff'
}
},
metaInfo () {
return {
title: this.title,
meta: [
{ vmid: 'description', name: 'description', content: this.description }
]
}
}
}
</script>
PostContainer.vue:
<template>
<div>
<post :title="title"></post>
</div>
</template>
<script>
import Post from './Post.vue'
export default {
name: 'post-container',
components: { Post },
data () {
return {
title: 'Example blog post'
}
}
}
</script>

metaInfo() {
return {
title: this.pageTitle,
}
}

Property not defined with VueJS mixins

I try to use Mixins with Vue.js. But I encounter several issues with them :/
This is my current code for my two test modules :
ErrorBaseMixin.vue
<script>
import ErrorAlert from './ErrorAlert';
export const ErrorBaseMixin = {
data() {
return {
// Errors management
error_display: true,
error_data: {
level: "warning",
time: 0,
status: 200,
message: ""
}
}
},
methods: {
// ------------------------------------------------------------------------
// Errors management functions
// ------------------------------------------------------------------------
error_function_show_error: function() {
try {
this.$refs.error_component.launch();
}
catch {}
},
callback_error_catched: function(e) {
if(e.message === 'Network Error'){
this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
this.error_data.level = "danger";
}
else {
this.error_data.message = "An error occured : " + e.message;
this.error_data.level = "warning";
}
this.error_function_show_error();
},
},
components: {
ErrorAlert
}
}
export default ErrorBaseMixin;
</script>
Test.vue
<template>
<ErrorAlert
:error_display="error_display"
:error="error_data"
ref="error_component"
/>
</div>
</template>
<script lang="js">
import {ErrorBaseMixin} from '../../../parts/ErrorBaseMixin.vue';
export default {
mixins: [ErrorBaseMixin],
name: 'Test_elt',
created() {
this.REST_ADDR = "test/test";
},
data() {
return {
field: {
id: '55',
name: 'test'
}
}
},
methods: {
}
}
</script>
But when I compile the last module, I have the following errors in my browser console :
[Vue warn]: Property or method "error_data" is not defined on the
instance but referenced during render. Make sure that this property is
reactive, either in the data option or for class-based components, by
initializing the property.
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
But... Everything is working fine. So I don't understand why I have these errors

You must change ErrorBaseMixin.vue to ErrorBaseMixin.js:
import ErrorAlert from './ErrorAlert';
const ErrorBaseMixin = {
data() {
return {
// Errors management
error_display: true,
error_data: {
level: "warning",
time: 0,
status: 200,
message: ""
}
}
},
methods: {
// ------------------------------------------------------------------------
// Errors management functions
// ------------------------------------------------------------------------
error_function_show_error: function() {
try {
this.$refs.error_component.launch();
}
catch {}
},
callback_error_catched: function(e) {
if(e.message === 'Network Error'){
this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
this.error_data.level = "danger";
}
else {
this.error_data.message = "An error occured : " + e.message;
this.error_data.level = "warning";
}
this.error_function_show_error();
},
},
components: {
ErrorAlert
}
}
export default ErrorBaseMixin;
And then import in your component:
import {ErrorBaseMixin} from '../../../parts/ErrorBaseMixin.js';
export default {
mixins: [ErrorBaseMixin],
...
Note: Take care how import and export, I have changed the way.