In my laravel 5.6 / vue.js 2.5.7/ Bootstrap4.1.0 application I added i18n support using
https://github.com/kazupon/vue-i18n
plugin
It works ok, but if in vue code I use syntax, like :
<p>{{ $t('message.hello', {name: 'visitor'}) }}</p>
I would like to get label in Javascript, say in computed , as some labels depends on values of other data.
Can I do this and if yes how?
UPDATED :
I want to detalize my task:
I have editor in 2 modes for insert and update and in the template I give a parameter to other subcomponent editor-header :
<template>
...
<editor-header :header_title="header_title"></editor-header>
...
mounted() {
...
this.setAppTitle(this.header_title, false);
}, // mounted() {
...
computed: {
header_title: function () {
// if (!this.is_insert) return "Edit " + t("document_category.document_category");
// return "Add "+t("document_category.document_category");
if (!this.is_insert) return "Edit document category";
return "Add document category";
},
In my i18n files I have both labels : “Edit/Add” and “document category”, but I do not know if there is a way to manipulate as I tried in header_title.
Can it be done in some other way ?
Thanks!
Related
I have a custom Media Library which I need to integrate with CKEditor 5. I've managed to write a plugin for adding images and another for adding download links for documents, but I can't get the downcast conversion for the download links to work properly.
I am currently able to insert the following into the content of the CKEditor window:
<a class="downloadLink" data-file-id="3" download="pretty-file-name-for-download.pdf" href="actual_file_name.pdf">Download link text</a>
and when I save my content this gets written to the database - so far so good.
When I reload the content into the editor, it comes back formatted differently:
<a href="actual_file_name.pdf">
<a class="downloadLink" data-file-id="3" download="pretty-file-name-for-download.pdf" href="actual_file_name.pdf">Download link text</a>
</a>
There is now an additional anchor tag wrapping the original anchor tag.
My downcast and upcast converters look like this:
conversion.for('downcast').elementToElement( {
model: {
name: 'downloadLink',
attributes: ['fileId', 'fileUrl', 'fileDownloadName', 'title']
},
view: (modelElement, conversionApi) => {
const viewWriter = conversionApi.writer;
return viewWriter.createContainerElement(
'a',
{
'data-file-id': modelElement.getAttribute('fileId'),
'download': modelElement.getAttribute('fileDownloadName'),
'href': modelElement.getAttribute('fileUrl'),
'class': 'downloadLink'
},
viewWriter.createText(modelElement.getAttribute('title'))
);
}
} );
conversion.for('upcast').elementToElement( {
view: {
name: 'a',
classes: 'downloadLink'
},
model: (viewElement, conversionApi) => {
const modelWriter = conversionApi.writer;
return modelWriter.createElement(
'downloadLink',
{
fileId: viewElement.getAttribute('data-file-id'),
fileUrl: viewElement.getAttribute('href'),
fileDownloadName: viewElement.getAttribute('download'),
title: viewElement.getChild(0).data,
}
);
}
} );
If anyone has any suggestions about what I'm doing wrong I'd appreciate the help!
I have a requirement to use vue js slot to inject the content anywhere in the dom.
The component is going to have props as below -
1. in: The target element. Should be able to accept a string selector, or an element as object.
2. as: Defines one of the insert modes: (append, prepend, replace, fill)
I am still looking for solution how the slot will be rendered in the given selector and inserted as per given insert mode. Below is my slot component -
MySlotComponent.vue:
<script>
export default {
props: {
in: {
type: [String, Object],
default: 'body'
},
as: {
type: String,
default: 'append'
}
},
render(h) {
return this.$scopedSlots.default();
},
}
</script>
In my laravel 5.6/vue.js 2.5.7 / vue-i18n 7.8 I want to show language label with html tag, like :
'votes_with_rating' => 'votes {related_votes_count} with rating `<b>{calc_artist_rating}</b>`',
and in vue file with computed:
...
computed: {
votes_with_rating_value: function () {
return this.$tc( 'artist.votes_with_rating', { related_votes_count : this.artist.related_votes_count, calc_artist_rating:
this.calcArtistRating(this.artist.related_votes_count, this.artist.related_votes_sum, 1)} );
},
...
But the result is different I expected, as numbers are not rendered:
https://imgur.com/a/0rWRTvE
If not to use
<span v-html
then the output is valid...
Which is the right way?
Thanks!
I have a this md-dialog https://codepen.io/patapron/pen/oLaxap
<md-button ng-click="answer('not useful')" >
Not Useful
</md-button>
<md-button ng-click="answer('useful')" style="margin-right:20px;" >
Useful
</md-button>
How do to I get remove the md-autofocus from the buttons?
Objetive: Any button must be pre-selected paint in grey.
There is an easier way to do this without having to write a custom directive. Angular Material has the ability to remove autofocus built-in.
In your controller where you are writing the .show function, set the focusOnOpen to false focusOnOpen: false
The documentation explains it here $mdDialog
Here is an example of how mine looks
function deleteMediaDialog() {
var dialogData = {
};
$mdDialog.show({
controller : 'deleteMediaDialogController',
controllerAs : 'vm',
templateUrl : 'app/main/apps/scala-media/dialogs/delete/delete-dialog.html',
parent : angular.element($document.body),
focusOnOpen : false,
clickOutsideToClose: true,
locals : {
dialogData: dialogData
}
});
}
I solved by mysleft. Directive magic
scope.$watch(function () { return ele.attr('class'); }, function () {
if (ele.hasClass('md-focused')) {
ele.removeClass('md-focused');
}
});
I have noticed that it is possible to have some kendo logic and variables inside a template in the columns sections.
This is an example from my column section template
template: "#= myVariable# #if(myBoolean) {# <img src='/images/myImage.png' /> #}#"
Please do note that myVariable and myBoolean are variables (fields) of each row of the grid.
Unfortunately i tried the same under the command section in the template. I get the following error "ReferenceError: myVariable is not defined"
Is there any way to add variables in the command sections as it happens with the columns?
As far as I know using templates in columns.command is not even documented: although it works. And you can do things like:
columns : [
{
command: {
template : "# console.log('this', this); console.log('data', data); # toto"
}
},
...
]
or even like:
command: {
template : function (arg) {
console.log("this" ,this);
console.log("arg", arg);
console.log("data", data);
return "toto";
}
}
But what the template returns needs to be a string and in the console of your browser you will see that this is window, arg is the object command and data is an array containing grid data.
Although you can include extra arguments as:
command: {
template : function (arg) {
console.log("this" ,this);
console.log("arg", arg);
console.log("arg.a", arg.a);
console.log("data", data);
return "toto";
},
a: "extra argument"
}
Where I add an extra a argument that can be accessed via arg.a you still cannot get access to current row data since the element is still not inserted.
Instead of that what I do propose is doing something like:
columns : [
{
title: " ",
template: "#= myVariable# #if(myBoolean) {# <img src='/images/myImage.png' /> #}#"
},
...
]
You don't need to have it as command, right? Why do you need it as command?