Since the update to React18 I have the problem with i18next that I can no longer write variables in labels or similar.
The following code worked without problems in React17:
<Field>
<label className={"p-error"}>{errors.username?.message}</label>
</Field>
But since react18 I get the following error message:
TS2322: Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined' is not assignable to type 'ReactI18NextChild | Iterable<ReactI18NextChild>'. Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is not assignable to type 'ReactI18NextChild | Iterable<ReactI18NextChild>'. Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is missing the following properties from type 'ReactPortal': key, children, type, props
I have read that in the current version it should be possible to set the allowObjectInHTMLChildren option somewhere so that this error no longer happens, however I am not clear where I can set this option. I tried it in the init method of i18next, but there this option is not available.
Related
I want to pass TailwindCSS pseudo-classes to a child component. However, I get an error message (Parsing error. Unexpected token :...).
Here is my code:
<cartImage :images="p.images" :classNames="hover:grow hover:shadow-lg" />
It seems you just need to pass a static value to the classNames prop. So you only need to remove the colon like this:
<cartImage :images="p.images" classNames="hover:grow hover:shadow-lg" />
When you do this :
:classNames="hover:grow hover:shadow-lg"
it will think of hover:grow hover:shadow-lg as a valid statement or variable - which will fail at this point.
If you want to pass a String you have 2 Options :
Either with a static prop
classNames="hover:grow hover:shadow-lg"
Or you wrap the input inside 2 single quotes '...' :
:classNames="'hover:grow hover:shadow-lg'"
here is my code, options array updated in created hook based on api response and response of api is array of object and v-model value is also updated in created hook. this selector is of input type and also filter the data based on input type from options array.
hope so this chunk of code is enough to explain.
<q-select
ref="registeredCountry"
for="registeredCountry"
color="olab-brand-blue"
v-model="registeredAddress.country"
use-input
fill-input
hide-selected
:options="countryOptions"
#filter="filterCountryList"
emit-value
option-label="countryName"
option-value="countryName"
#update:model-value="resetStateAndCityFields('registeredAddress')"
map-options
>
</q-select>
I got exactly the same Vue warning with one of my q-selects, after migrating it (unchanged) from Vue 2/Quasar 1 to Vue 3/Quasar 2. The same q-select code worked without warnings on the older levels. The warning is very unspecific from a Quasar point of view.
However, I found a hint on https://github.com/quasarframework/quasar/issues/8898 to eliminate this warning, which helped to resolve the issue in my case.
The reason for the warning was in my case due to the use of q-chips with q-items for the options in the q-select. Those q-items for the q-select options used "v-on='scope.itemEvents'", together with "v-bind='scope.itemProps'", which was the recommended combination in Quasar 1/Vue 2.
In Quasar 2/Vue 3 the "v-on='scope.itemEvents' is no longer necessary (if used, it causes this Vue warning). Just search for all "v-on='scope.itemEvents'" in your template code, then drop (i.e. delete) those "v-on=...", but keep the "v-bind=...".
This eliminates the above Vue warnings (which otherwise come up for every selectable option in your q-select).
I am having an issue when triggering the click handler in my button here. The error comes back as TypeError: Cannot read property 'discountProduct' of null when I click the button. I know for a fact that this.discountProduct.id has a value by inspecting it from the Vue Tools and by knowing that the button is rendering to begin with since it only conditionally shows if the id > 1.
I alternatively tried to remove this but it still throws the same error.
I also tried manually just inserting the product id as the param and that works so I am not sure what the issue is at this point.
<button v-if="this.discountProduct.id >= 1"
type="button"
v-on:click="addToCart(this.discountProduct.id, true)"
Is you button in the <template> tags?
If so, you do not need to use this delete from the click argument and v-if. However that should only throw a warning.
Can you also post the code for the method addToCart?
If you are not setting the full discountProduct object you will need to make sure setting the id is reactive. Like the example below:
this.$set(this.discountProduct, 'id', 1)
Nested Object/keys are not reactive without using $set. See https://v2.vuejs.org/v2/guide/reactivity.html for more details.
Hope this helps
I wrote an application in SAPUI5 in WebIDE. When I add Select items to page it shows and error but the program can run without error what is the reason of the error in WebIDE?
Some part of the code:
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns:footerbar="sap.ushell.ui.footerbar" controllerName="xxx.controller.Worklist">
<semantic:FullscreenPage id="page" navButtonPress="onNavBack" showNavButton="true" title="{i18n>worklistViewTitle}">
<semantic:content>
.....
</semantic:content>
<semantic:customFooterContent>
// Here it shows error: Semantic Error: SAPUI5: The Association property is incorrect. Please enter the correct value.
<ActionSelect xmlns:sap.ui.core="sap.ui.core" selectedItem="Element sap.ui.core.ListItem#__item1" selectedKey="item1" selectedItemId="__item1" id="__select_lang">
<items>
<sap.ui.core:ListItem text="English" key="EN" id="__item1"/>
<sap.ui.core:ListItem text="German" key="DE" id="__item2"/>
</items>
</ActionSelect>
</semantic:customFooterContent>
</semantic:FullscreenPage>
</mvc:View>
The error message is:
error: Semantic Error: SAPUI5: The Association property is incorrect. Please enter the correct value.
And I tagged in the code where it is shown.
It's the selectedItem association: It does indeed contain an invalid value (which is ignored at runtime).
Associations are set via the id of an element in XMLViews.
You are using three ways to preselect an item at once. Please choose only one.
selectedItem is an association and has to be set to the id of the selected item. this aggregation is seldom used.
selectedKey has to be set to the key of the item that should be selected (EN or DE in your case).
selectedItemId has to be set to the id of the item that should be selected. this property is usually preferred over the selectedItem association.
In your example it should be like so:
<ActionSelect xmlns:sap.ui.core="sap.ui.core" selectedItemId="__item1" id="__select_lang">
I am trying to show print button in jquery data table. But getting error like "Cannot read property 'ext' of undefined.
Script which I used are,
script_tag('www/js/data-tables/buttons.html5.js').
script_tag('www/js/data-tables/buttons.print.js').
script_tag('www/js/data-tables/dataTables.buttons.js').
script_tag('www/js/data-tables/jquery.dataTables.js')
And css ,
link_tag('www/js/data-tables/buttons.dataTables.css')
Declare the scripts in the reverse order :
script_tag('www/js/data-tables/jquery.dataTables.js')
script_tag('www/js/data-tables/dataTables.buttons.js').
script_tag('www/js/data-tables/buttons.html5.js').
script_tag('www/js/data-tables/buttons.print.js').
dataTables extensions wants to access $.fn.DataTable.ext, which not is present if jquery.dataTables.js not yet is included.