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.
Related
Dynamic multilingual sites from the backend to the replacement of large sites
I changed the language, but this time I am trying for the first time to do it at the front desk (Nuxt.js + i18n).
<a href="https://gooogle/en.com" data-link="fugafuga">
Without using nuxt-link
<template>
<a href="https://gooogle/｛｛t('locale')｝｝.com" data-link="｛｛t('hogehoge')｝｝" >
</template>
Is it possible to divert and use a tag as it is?
(In the above writing method, an error occurred and it was useless, so please teach me a workaround)
I18n t method wrapped in quotes in inside tag quote
How do I write it?
Such a shape is desirable because the scale is too large
We apologize for the inconvenience, but we would appreciate it if you could teach us.
thank you.
Suggested fix:
<template>
<a :href="`https://google/${t('locale')}.com`" :data-link="t('hogehoge')"></a>
</template>
You can read more about data binding with Vue/Nuxt here: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax
I have a Vue.js project (Nuxt.js) and as UI I use the Vuetify.
For e2e testing I use the Cypress.
Below is my scenarios of test in Cypress:
I have a problem while creating test for page where I use v-autocomplete component.
The problem is that I can't use Vuetify native classes to get the element I want to test.
below is an example with data-cy selector
<v-autocomplete
v-model="model"
:items="items"
item-text="Description"
item-value="API"
label="Public APIs"
placeholder="Start typing to Search"
data-cy="autocomplete"
></v-autocomplete>
I type some text into search input.
Then in v-autocomplete have been found search results.
And example of one of there is below:
...
<div>
<a class="v-list__tile v-list__tile--link theme--light">
<div class="v-list__tile__content">
<div class="v-list__tile__title">Result item
<span class="v-list__tile__mask">result item</span>
</div>
</div>
</a>
</div>
...
Then I want select one of search items by clicking to one of found results.
And for that I should to use native classes of Vuetify, but it is not have stability (.v-list__tile--link class сan be renamed by developers).
How I can add data-cy selector into result search html item?
Maybe who know any another way to resolve this problem?
I don't think v-list__tile--link can be changed by developers, it seems to be added at runtime DOM by the Vuetify library (unless you mean Vuetify developers, then sure it can change between versions).
In any case, if you want to be more content-oriented in your selectors, use Cypress .parent() selector
For example,
cy.contains('div', 'itemTextToSelect').parent('a').click()
If posssible make sure 'itemTextToSelect' is really distinctive (if you can set it in the test fixture).
BTW, before the user starts typing the autocomplete list is display: none, so you will need to either .type('something') into the input, or .click({force: true}) the item.
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"
I know there are plenty of answers to this question already, but none of them work now. Probably due to Bootstrap update.
Here is jsfiddle: http://jsfiddle.net/N0ir/Yh33b/
Who can figure this out?
<select>
<option value="1">Misha, davai po novoi</option>
</select>
.caret {
display:none;
}
You cannot change or alter the caret using css as the select element is generated by the browser by default (that's why they look different from browser to browser). You need to use js/css to get the change you want as well as keep it browser compatible. Here is a link to a nice one for Bootstrap users:
http://silviomoreto.github.io/bootstrap-select/3/
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.