I am using the Flicking package & the Flicking component is creating the carousel just fine but every time I try to move (flick) one of the child components an error is created by the Flicking component as follows.
Flicking.ts:58 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'key')
at Flicking.ts:58:19
at Array.map (<anonymous>)
at getPanels (Flicking.ts:57:28)
at normalizeChildren (runtime-core.esm-bundler.js:6408:42)
at createBaseVNode (runtime-core.esm-bundler.js:6170:9)
at _createVNode (runtime-core.esm-bundler.js:6263:12)
at createVNodeWithArgsTransform (runtime-core.esm-bundler.js:6128:12)
at h (runtime-core.esm-bundler.js:7479:16)
at Proxy.render (Flicking.ts:192:8)
at renderComponentRoot (runtime-core.esm-bundler.js:893:44)
I have implemented the following code on Vue3
<Flicking class="px-3" :options="{ moveType: 'freeScroll', bound: true } ">
<div #click="choosePref('1')>1</div>
<div #click="choosePref('2')>2</div>
<div #click="choosePref('3')>3</div>
<div #click="choosePref('4')>4</div>
</Flicking>
choosePref is a function that logs out the number in the div that was clicked.
const choosePref = (num) =>{
console.log(num)
}
Is the issue in my way of implementing or is there some sort of bug in the package? and can you please explain what the error is about and how to fix it?
Related
i'm consistently having this issue where with js/jsx/react, i am consistently running into this issue where my logic is running before the page loads, and because of that, i am consistently running into errors and what not as my code trys to execute before my page has finished loading resulting in a tonne of errors.
how do i consistently prevent this/prevent myself from running into these issues?
i've tried using a bunch of window.onload() functions but that feels wrong and i feel like there should be a better way to do so that' i'm unable to find with googling or on forms.
// an example of my issue is the following code consistently errors:
function Title() {
var text = "Hello";
var arr = [];
//convert word into an array of chars
for (let i=0; i<=text.length; i++){
console.log("loop")
arr.push(text.charAt(i));
}
//output each letter into a span
const listItems = arr.map((number) => <span>{number}</span>);
//neither of these work
// document.getElementById('title').style.color = ('rgba(0, 0, 0, 0.0)');
// document.getElementById('title').style.color = "#ffFFff"
return (
<h1 id='title'>{listItems}</h1>
)
}
the error i'm commonly getting is that react is claiming that the style i'm trying to change/access jsx claims "do not exists", but if i try change it in the console in the browser, it works fine.
To add inline styles to a react element you should use the style prop. This way:
<h1 id="title" style={{ color: "#fff" }}>{listItems}</h1>
You can't get access to the DOM element which is being rendered on the body of the component, you should instead use a ref and an useEffect for that purpose.
I have a problem with adding Google Translate plugin to my webpage. It works well in Chrome but it does not in Firefox. I added this code into my HTML:
<div id="google_translate_element" style="display: none;"></div>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
end this code into JS file:
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pl',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
autoDisplay: false,
},
'google_translate_element');
}
I get this error:
Uncaught DOMException: An invalid or illegal string was specified
ss https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:468
Iu https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:551
av https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:604
mv https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:627
googleTranslateElementInit https://www.swinoujscie.pl/:2107
e https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:52
Oi https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:52
<anonimowa> https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:628
<anonimowa> https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:633
Also translate.googleapis doesn't work for my Firefox on page https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate
I updated Firefox but this didn't fix the problem.
I run into the same issue. It seems like the problem is caused by lack of proper support for the second parameter measureOptions of performance.measure() function in Firefox below v103 which some part of Google Translate widget relies on.
See MDN specification: https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure#browser_compatibility
When I pass following attributes, Next.js raise warning. Is it a way to avoid?
<div
className="col-lg-6"
data-anima="fade-bottom"
data-time={1000}
></div>
and the warning message:
next-dev.js?3515:24 Warning: Extra attributes from the server: style
at div
at div
at div
at section
at main
at Home
at Layout (webpack-internal:///./components/Layout.tsx:11:26)
at AppProvider (webpack-internal:///./tikexModule/AppContext.tsx:24:26)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
at MyApp (webpack-internal:///./pages/_app.tsx:68:27)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:8:20740)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:8:23199)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:675:26)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:797:27)
This should work on same page, if used on another page for e.g. slug then unfortunately that will disappear upon page refresh.
For example:
HTML element code:
<div
id="myId"
className="col-lg-6"
data-anima="fade-bottom"
data-time={1000}
></div>
Your component code:
const querySelector = document?.querySelector("div[id='myId']");
const time = querySelector?.getAttribute("data-time");
console.log("%c time:", "font-size:24px;background-color:yellow;color:red;", time);
I have a chat window on my app and I want to update the size of an image in this chat window when the chat window is less than a certain width. Is there a way I can update the css style or class based on the width?
I'm using typescript and have the value of my cat window passed in:
#Input()
public chatWidth: number;
In my html, I was attempting to do something like this where I would apply a css class if the chatWidth property was less than 400:
<img *ngIf="upsell?.image?.url; let url" [src]="url" ng-class="{bigger-img : chatWidth < 400}">
However, this doesn't work and I don't seem to even get an error in my console
Use
<img *ngIf="upsell?.image?.url; let url" [src]="url" [ngClass]="{'bigger-img': chatWidth < 400}">
More info here on ngClass.
UPDATE
You can, I believe, wrap the condition in a 'method' that returns a boolean defined in your respective component and call it in the template instead of directly declaring it in the template. Here, in your case,
in component.ts,
checkChatWidth(): boolean {
return this.chatWidth < 400;
}
then, in your template,
<img *ngIf="upsell?.image?.url; let url" [src]="url" [ngClass]="{'bigger-img': checkChatWidth()}">
You have to take care of the possible 'null' checks within your 'method' that may arise due to not having a value for the 'chatWidth' input property based on your code setup.
In this example I have two additional css classes I want to add to a DIV.
<div data-bind="foreach: [{name: 'Hello', size:'Triple'}]">
<div class="tile"
data-bind="css: {'tile-selected': true, $data.size : true}">
</div>
</div>
The first being 'tile-selected' based on a boolean. This works well.
The second is actually a name of a class 'Triple', (and in this example, always add it, ie 'True')
I get the error:
Uncaught Error: Unable to parse bindings.
Message: SyntaxError: Unexpected token .;
Bindings value: css: {'tile-selected': true, $data.size : true}
I'm assuming that I can't use the $data.size part to pull in the 'Triple' literal from the 'size' property. Is there a way that I can do this? ($data['size'] also didn't seem to work)
You cannot use the ko observables or properties as class names. Instead you would have to create a separate property for this and use the same for dynamic css binding something like below.
<div data-bind="css: sizeCSS"> Profit Information</div>
var viewModel = {
/// some view model properties here.
};
viewModel.sizeCSS = ko.computed(function() {
return this.size();
}, viewModel);
EDIT: Check the dynamic CSS binding example here: http://knockoutjs.com/documentation/css-binding.html