On the following snippet, the "Android" will be visible after page loads (I guess when js loads).
At first, the page displays up-to the first quote, namely: Try . Then it will load the whole placeholder correctly: Try "Android"
Is it possible to display the content inside the double quotes also while page is loading?
<template lang="pug">
input( placeholder='Try "Android"' )
</template>
Related
I am writing my first app in Vue3 and I use composition-api with script setup.
Using v-for, I create components that are inputs (CrosswordTile) that make up the crossword grid.
A problem appeared during the implementation of the field containing a clue to the password.
Since the text doesn't allow text to wrap, I wanted to dynamically change the tag to after a click.
Function in parent component where I handle logic after click that change tile type works fine, but I need to change tag of "target" to and set maxLength to a different value.
If it would help here is whole code on github: https://github.com/shadowas-py/lang-cross/tree/question-tile, inside CrosswordGrid.vue.
function handleTileTypeChange(target: HTMLInputElement) {
if (target && !target.classList.contains('question-field')) {
addStyle(target, ['question-field']);
iterateCrosswordTiles(getNextTile.value(target), removeStyle, ['selected-to-word-search', 'direction-marking-tile']);
} else if (target) {
removeStyle(target, ['question-field']);
if (getPrevTile.value(target)?.classList.contains('direction-marking-tile')) {
iterateCrosswordTiles(
target,
addStyle,
['selected-to-word-search', 'direction-marking-tile'],
);
}
}
TEMPLATE of ParentComponent
<div
class="csw-grid"
#input="handleKeyboardEvent($event as any)"
#mousedown.left.stop="handleClickEvent($event)"
#click.stop="">
<div v-for="row in 10" :key="row" class="csw-row" :id="`csw-row-${row}`">
<CrosswordTile
v-for="col in 8"
:key="`${col}-${row}`"
#click.right.prevent='handleTileTypeChange($event.target)'
/>
</div>
</div>
I tried to use v-if inside CrosswordTile, but it creates a new element, but I just need to modify the original one (to add/remove HTML classes from it basing on logic inside CrosswordGrid component).
How can I get access to the current component instance properties when using the composition API in script setup or how to replace the tag dynamically?
:is and is doesn't work at all.
I want to toggle whether a card is rendered in my vue app.
I am using v-if on v-card
Code:
myString == "MONEY
<v-card v-if="`${myString.slice(4,5)}` == "EY".
I get the error that .slice is not a function...I know it works for
`${myString.length}`== 5
Slice is zero based so you may want to try.
myString.slice(3,5)
or
myString.slice(3)
I am using a frontend library called Element UI to create some accordions on my website. I got an array of objects that I like to create accordions for. FYI, from the element ui website: the v-model used on the accordion specifies the currently active panel. The name attribute is the unique identification of the panel. That means I can do:
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="Consistency" name="1">
<div>content content content</div>
</el-collapse-item>
<el-collapse-item title="Consistency" name="2">
<div>more content more content more content</div>
</el-collapse-item>
</el-collapse>
One this loads, the first accordion will open since in the data object, activeName is set to 1:
data() {
return {
activeName: '1',
}
}
Now I thought I'd just loop through the array and create accordions for the items in my array, and binding the name attribute to the index + 1, so that the first item will have the name attribute equal to 1, the second to 2 etc. So:
<el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="(item, index) in experience"
:title="item.company"
:name="index + 1"
:key="index"
>
<div> content content content </div>
</el-collapse-item>
</el-collapse>
But for some reason, when the page loads, the first item in the accordion won't open automatically. They're all closed by default. I created a codesandbox with the problem that you can see for yourself here: codesandbox
The problem is that when you run a for loop and assign name, it's a number and not a string.
:name="index+1" <---- This is a number
But, activeName is a string. So, the values don't match and that's why the accordian does not open on page load.
Here's an updated sandbox: https://codesandbox.io/s/vue-template-ysm79
I changed activeName to a number. The for loop accordian will now open and the normal HTML accordians won't.
I have a string that contains some HTML markup.
I would like to pass this into a component's slot.
This component is used elsewhere with regular html markup between the opening and closing tags, and works as expected.
The issues are that mustache syntax outputs escaped HTML, {{myFormattedText}} becomes literally Some line of <span>text with formatting</span> that is passed in from somewhere else which is not what we want.
Passing it in the v-html="myFormattedText" attribute on the component replaces all content inside the component tags with the variable string.
Is there a way to do this? I'd like to reuse this component, for visual consistency reasons, but the content that we receive for it is disparate and varies widely based on the view or source.
Test string:
myFormattedText = "Some line of <span>text with formatting</span> that is passed in from somewhere else";
Component:
<template>
<div class="doing-a-thing">
<h2>Some text</h2>
<div class="thing">Random stuff</div>
<slot></slot>
</div>
</template>
Attempts:
<mycomponent>{{myFormattedText}}</mycomponent>
<mycomponent v-html="myFormattedText"></mycomponent>
Just put the v-html render on an element inside the component tags and it'll get rendered correctly and passed in.
<mycomponent><div v-html="myFormattedText"></div></mycomponent>
Again, moments after posting, it hits me like a bolt of lightning...
I want to understand how prestashop works regarding mobile displays.
I noticed in the used template, the header.tpl file contains the following html divs for mobile:
<div class="float-xs-right" id="_mobile_language_selector"></div>
<div class="float-xs-right" id="_mobile_user_info"></div>
<div class="float-xs-right" id="_mobile_cart"></div>
<div class="float-xs-right" id="_mobile_currency_selector"></div>
I also noticed that once I remove any of the components (for example the shopping card) from theme.yml:
global_settings:
configuration:
PS_IMAGE_QUALITY: png
modules:
to_enable:
- ps_linklist
hooks:
modules_to_hook:
displayNav1:
- ps_contactinfo
- tuxinmodaccessibility
displayNav2:
- ps_languageselector
- ps_currencyselector
- ps_customersignin
REMOVE THIS LINE ->>> - ps_shoppingcart
displayTop:
then the cart component is not displayed in the navbar. so the mobile and deskop version required this configuration to be set.
I noticed also that for each component besides having main div with _mobile_ prefix, there are also divs with _desktop_ prefix.
I'm trying to find out how to properly add my accessibility component to the navbar and that it will also be displayed on mobile.
so far it displays only on desktop and not on mobile so I was guessing that I need to add something like
<div class="float-xs-right" id="_mobile_tuxinmodaccessibility"></div>
no idea how to implement it properly.
I don't quite understand how for example, how this process works for mobile_cart div while the module name is ps_shoppingcart.
any information regarding the issue would be greatly.
You need to checkout themes/classic/_dev/js/responsive.js file.
The answer is in the theme.js file.
Script moves contents between desktop and mobile HTML elements in DOM. Every HTML element with ID that starts with id="_mobile_" gets content from corresponding desktop variation that starts with id="_desktop_" (if you inspect DOM in mobile view you'll notice that desktop elements got empty).
function o() {
u.default.responsive.mobile ? (0, s.default)("*[id^='_desktop_']").each(function(t, e) {
var n = (0, s.default)("#" + e.id.replace("_desktop_", "_mobile_"));
n.length && r((0, s.default)(e), n)
}) : (0, s.default)("*[id^='_mobile_']").each(function(t, e) {
var n = (0, s.default)("#" + e.id.replace("_mobile_", "_desktop_"));
n.length && r((0, s.default)(e), n)
}), u.default.emit("responsive update", {
mobile: u.default.responsive.mobile
})
}