I'm trying to use "v-maska" along with "vuetify 3" and have faced the issue.
<v-text-field
v-for="field in fields"
name="foo"
label="Bar"
v-maska
data-maska="##-##"
data-fizz="buzz"
v-model="field.value"
/>
Vuetify doesn't pass the "data-maska" attribute down to the element keeping the "data-maska" attribute in the "v-input" div.
Same fairs for any other data-* attribute. So I'm assuming that it's not just v-maska related issue but how vuetify passes down the attributes excluding data-*.
Does anyone know with a workaround or the proper way to do that?
Related
I started to use vuetify 3 beta, I know it is not stable according to the documentation but I still tried.
<v-text-field placeholder="Type a name" class="v-field__outlined" outlined></v-text-field>
End result is the basic vuetify text field.
How do I fix this, any help is appreciated!
The styles are no longer individual prop values.
Styling options are now set via a prop called variant
variant="outlined"
It is also no longer possible to mix the different styles and rounded appears to be missing so far.
https://next.vuetifyjs.com/en/components/text-fields/#variant
I want to use in line editing option in Vuetify Datatable component instead of opening a dialog box for editing.
Is there a way to use contenteditable attribute in element in vuetify Datatable component.
According to MDN https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable you can apply contenteditable attribute to any HTMLElement.
Try adding the attribute to the element you want to edit.
eg
<div contenteditable="true"></div>
Vuetify has an inbuild content editable mode.
DOCS
The idea is that in every slot you add a v-edit-dialog and v-text-field and then sync the data using v-model and return-value.sync
Instead of using contenteditable attribute, I used the following code and worked perfectly (editable without opening a dialog box and save to bind variable)
<template v-slot:item.name="props">
<v-text-field v-model="props.item.name"> </v-text-field>
</template>
Previously (I thought?) it was possible to put HTML into vuetify hints but for me this is no longer working. For example, in one of my components I have:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
/>
This hint used to display in red but now I see the full HTML code. Has something changed or am I doing something wrong?
In the Vuetify forum, MajesticPotatoe pointed me towards the bug report https://github.com/vuetifyjs/vuetify/issues/9647. This gave the following slots workaround, which works in my code:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
>
<template v-slot:message="{ message, key }">
<span v-html="message"></span>
</template>
</v-checkbox>
It seems that this used to work without slots before the patch https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d was merged.
behaviour changed from 1.5.19 to 1.5.20
1.5.19 (and before) treats html tags as expected
1.5.20, 1.5.21 treat html tags as simple text
'hint' is the 'string' type so you can't add HTML tags. Here is the screenshot from documentation: https://prnt.sc/qlag61
So, I think you can apply red color from CSS / SCSS using this class name '.v-messages__message' if you really need red color in hint.
I am developing a module for Joomla 3.3.6. I want to use "editor" field type in "repeatable" field in the xml file. The code I am using is as follows:
<field
name="fpssibtos_img1subs"
type="Repeatable"
icon="list"
label="GLOBAL_SUBS"
description="GLOBAL_SUBS_DESC"
default="{'fpssibtos_img1sub':['test']}">
<fields name="params">
<fieldset hidden="true" name="fpssibtos_img1subs_modal" repeat="true">
<field
name="fpssibtos_img1sub"
default="test"
type="editor"
label="GLOBAL_SUB"
description="GLOBAL_SUB_DESC"
filter="safehtml"/>
</fieldset>
</fields>
</field>
The problem is the editor is not editable, I mean you cannot type anything in it.
I am using CKEditor, I changed it to TinyMCE and others ,but the problem persists. I know that repeatable form field is still buggy ,but I thought some of you guys might know the fix to this particular problem.
In case anyone else comes across this problem, the repeatable form fields only support simple field types. This is apparently due to Joomla not having a simple way for scripts to interact.
Comment on the issue from one of the devs here and here.
I am trying to use a kendo numeric text box with angular validation (ng-required) however I'm not able to get it working. The ng-required attribute on this element has no effect on the form validation status.
From my understanding, the reason why this doesn't work is because kendo numeric text box uses k-ng-model to store it's value, whereas the angular validation works only with ng-model.
Has anyone else seen this issue, are there any workarounds?
I have found a workaround that involves using the kendo-numeric-text-box along with a hidden input field which makes use of ng-model.
<input data-kendo-numeric-text-box data-k-ng-model="numValue"/>
<input type="hidden" data-ng-model="numValue" data-ng-required="true" />