I have an app running with
Nuxt 2.15.7
vue-gettext 2.1.12
easygettext 2.1.12
that should support various languages such as en, de , fr, it
it does do it well when I do
<template>
<div>
<select name="language" v-model="$language.current">
<option v-for="(language, key) in $language.available" :value="key">{{ language }}</option>
</select>
</div>
<h1><translate>Hello, translate me</translate></h1>
</template>
I can follow the workflow with the help of an appropriate Makefile
make makemessages
do the translations on the .po files
make translations
Now, my language selector should move to another view, say the user profile view. As per doc,
the vm.$language object is injected throughout the app. It should be reactive and I should be able to see the effect of switching language immediately after switching.
This is not the case and I wonder how I could achieve this.
Related
I've been struggling all day to find a way to conditionally render a directive on an element.
I ended up on this page: https://vuejs.org/guide/extras/render-function.html but then I wasn't able to append my compiled template (using vue-template-compiler, since I'm using some version of vue which doesn't include the compiler).
At the end of the day this is what I figured:
<div>Some foo</div>
<template v-if="withDirective">
<input :value="value"
:disabled="disabled"
:type="type"
v-some-directive="someValue" />
</template>
<template v-else>
<input :value="value"
:disabled="disabled"
:type="type" />
</template>
<div>Some bar</div>
Is there a better way?
I have a lot more attributes on the input, so there's really a lot of duplicate code which I would love to avoid.
This html is inside a custom component, so all the values like disabled, required, etc, are props passed from outside.
The best way I found so far is compiling a string template conditionally using compileToFunctions.
So instead of having the template tags and the v-if in the template, I simply add the conditional directive(s) before compiling the component.
ATTENTION
Keep in mind that the compilation is runtime, I don't have enough experience with Vue (yet) to tell if this way is faster than using v-if. What is sure is that we saved a lot of duplicate lines in the template, which is handy when editing common parts.
In this doc I found that I can customize our CMS templates, slots and components:
Data-driven outlets are provided by the CMS structure. There are three types, as follows:
CMS Page layout name: Each page layout is available as an outlet reference.
CMS page slot positions: Each slot position is an outlet reference. Since slot positions are not necessarily unique throughout the CMS structure, an outlet template might occur more then once. There is currently no standard technique available to limit the outlet for a specific position or page.
CMS Component type: Each component type is available as an outlet. While component type-driven outlets can be used, it is generally considered best practice to leverage Customizing CMS Components for introducing custom component UI.
Could you please provide any example how to do that with outlets if I have next custom structure:
<main>
<cx-page-layout class="AccountDetailsPageTemplate">
<cx-page-slot class="BottomHeaderSlot"></cx-page-slot>
<cx-page-slot class="AccountMenuSlot"></cx-page-slot>
<cx-page-slot class="AccountContentSlot"></cx-page-slot>
</cx-page-layout>
</main>
As result I would like to have next layout view:
I know how to do that using global styles only, but preferably is to use templates (outlets), because it can be the case when we require to add some extra parent div's over the slots and so on.
To build such structure with provided set of Slots, we can do next:
app.component.html (REQUIRED)
<ng-template cxOutletRef="AccountDetailsPageTemplate">
<app-account-details-page></app-account-details-page>
</ng-template>
account-details-page.component.html
<h1>
Hello AccountDetailsContentSlot
</h1>
<div class="d-flex">
<div class="w-50">
<cx-page-slot position="AccountMenuSlot"></cx-page-slot>
</div>
<div class="w-50">
<cx-page-slot position="AccountContentSlot"></cx-page-slot>
</div>
</div>
I didn't put here BottomHeaderSlot, because it should't be here, it should be implemented in cx-header component.
Goodnight.
Working with VUE and MaterializeCSS I'm having problems using since I need to list a number of options from an array of objects filled in from an Ajax request but apparently VUE is hiding the information by creating a new under the main one.
Then I would like to know if anyone knows how to deactivate an element of the Materilizecss framework? In this case . Thank you.
If someone works for you:
Add the browser-default class to the but indicate in the display: block style because for some reason it hides it.
<select class="browser-default" style="display:block" v-model="category_id">
<option v-for="category in arrayCategories" :key="category.id" :value="category.id" v-text="category.name"></option>
</select>
Greetings.
The issue is this:
In my APP, I need to knw if a SELECT element is visible or not in the DOM under the MATERIALIZE framework. (Please do not mark this question as already discussed in here until you read it until the end.
So far I have been using document.getElementById('xx').offsetParent!==null to check that, and it has worked fine for me so far.
However, since I migrated my HTML code to Materializecss, my visiblity checking function does not work anymore.
This piece of code works perfectly in pure HTML
<div class='input-field col s12'>
<select name='V18' id='V18' />
<option value='' disabled selected>Select</option>
<option id='V18_1' value='1'>Choice 1</option>
<option id='V18_2' value='2'>Choice 2</option>
<option id='V18_3' value='3'>Choice 3</option>
</select>
</div>
<script>
if
(document.getElementById('V18').offsetParent!==null){
alert('Select is visible');
}else{
alert('Select is NOT visible');
}
</script>
Once I initialize the Selects in Materialize css, by calling the function $('select').material_select(), my visibilty checking function does not work anymore.
I have already tested all the options discussed on these links, and none of them work for Materialize selects:
Check if element is visible in DOM
How do I check if an element is hidden in jQuery?
My, question is...How can I check if a SELECT element is visible or not within the Materialize Framework? Seems that after initializing the selects, they loose some critical Javascript properties, somehow.
Does anyone have the same problem?
The workaround that I found for materializecss was to treat selects in a different way from radion buttons and texts,
For selects I detect visibility by using: window.getComputedStyle(element)).display === 'none'
For the rest kind of elements I detect visibility by using: "document.getElementById(element).offsetParent!==null"
Ok, so I'm building an app using Dojo 1.8, and I have a custom widget with a template similar to this...
<div>
<label for="tag">Select something: </label>
<select id="tag"
data-dojo-attach-point="tag"
data-dojo-type="dijit/form/Select">
<option value="0">option 0</option>
<option value="1">option 1</option>
</select>
</div>
However, when the template gets rendered, the widget defines a new id, which makes the tag useless. I've tried googling this, but all my searches just direct to the Dojo documentation since they have attributes called labels but have nothing to do with the HTML label tag.
What is the proper why to do this?
In the situation you describe, you can simply place the label around your <select> and dispose with the for/id attributes. see Stackoverflow question:
How do I align two dojo widgets next to each other?, also see: w3 tutorial on label use
Also, if you want to actually use Ids in a widget template, see:
How do I create unique IDs in a Dojo widget template?
Using ids directly (ie. hard-coding them, not assigning them on-the-fly as in the above link) is not encouraged. The reason for this is that a template is meant to used over and over again in the creation of widgets.
In theory, it could be used to create multiple widgets on one page. Hence, in that situation you would have an id conflict. Each HTML id, on any one page, needs to be unique.