Is it possible to use v-if on style block, like so?
<style lang="scss" v-if="pinkTheme">
.ac-textfield
{
background: hotpink;
}
</style>
I tried this and it's not working (the v-if directive is ignored). I know that I could do this:
<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>
However, this will quickly become difficult to maintain if I want to modulate more than one style using the value of pinkTheme. Right now, I'm using CSS selectors to achieve the desired effect:
<template>
<div class="ac-textfield" :class="{ pinkTheme }">
</div>
</template>
<style lang="scss">
.ac-textfield
{
//...
}
.ac-textfield.pink-theme
{
background: hotpink;
}
</style>
However, I don't like this solution very much (I want to achieve greater separation between my themes, and I want the browser to only have to load one theme at a time). Is there any way to make something like the first code block work?
That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.
v-if is used for conditional html rendering and v-if accept the getter function that should return either true or false. You can't use v-if with style.
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 have an HTML element like below
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
initial value of showOriginalContent is false
and from mounted method am calling an another method where i will make the value of showOriginalContent to true based on some conditions . Currently even if the showOriginalContent is true i can see that v-else is getting displayed for a fraction of seconds before v-if is rendered in the DOM . How can i solve this issue ? I tried to move the function call to all other life cycle methods but nothing is working . I have gone through before and after navigation approach in vue js ,Is it possible to apply that logic here?
I think it's normal if I understood correctly what you posed as the problem.
Because the mounted state is called when the view has already been OK and displayed and only once.
So a variable declaring in this method its change will not necessarily have an effect on what should be displayed.
Try to see the lifecycle in Vuejs for more detail.
Put it in computed or watch methods to see.
Use an outer div and control this div with another variable that will be true when you are done with your condition parts in mounted hook.. like this..
<div v-if="conditioncheckdone">
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
</div>
It will resolve your issue of displaying v-else stuff while you are checking your conditions in mounted
turn the default showOriginalContent value to null instead of false
<template>
<div>
<span>foo</span> <!-- unwanted space here -->
<span>bar</span>
<span>foo</span>
</div>
</template>
// But I don't want to do this
<template>
<div>
<span>
foo
</span><span> <!-- bad coding style -->
bar
</span><span>
baz
</span>
</div>
</template>
In html, newlines between elements are rendered as spaces, and Vue followed that behavior. If I want no spaces between the elements, the obvious way is to put no space there, as shown in the code sample. But it is ugly, I don't want that. How can I do otherwise such that there is no space between the elements?
You can change the compiler options.
compilerOptions
type: Object
default: {}
Options for the template compiler. When using the default vue-template-compiler, you can use this option to add custom compiler directives, modules, or discard whitespaces between template tags with { preserveWhitespace: false }.
However the documentation states this only applies to single file components and template tags. I don't think there is currently any option for native tags and related issue has been closed. But maybe it gives you the desired result.
I have a template with several divs, each containing an #click that triggers a specific function and a corresponding visual effect
<template>
<div #click="function doThis(param1)></div>
<div #click="function doThis(param2)></div>
<div #click="function doThis(param3)></div>
<div #click="function doThis(param4)></div>
<div #click="function doThis(param5)></div>
</template>
method: {
doThis(param) {
lightUpDiv(corresponding param)
}
}
I'm also calling doThis from the parent via a $broadcast. What if any, is the best Vueish way to trigger the corresponding lightUpDiv call from the $broadcast? (just use getElementById and .click()???). I used individual divs vs a v-for in the hope that this is easier.
I should note that there are several instances of the template On the page. Even if the same visual effect is caused simultaneously on all the templates that is fine. If there is a way to call them on the specific template instances that is even better.
I've spent hours trying to figure this out and cannot seem to do it. Have read all the guide and API. I know there is some way to bind the data to make the template instances unique but can't seem to get it. Definitely couldn't see the #click from $broadcast solution
Thanks for any help!!
<div #click="doThis"></div>
OR
<div #click="doThis($event)"></div>
Both are functionally equivalent, but second version is recommended as it is more explicit.
In javascript,
doThis: function(ev){
//ev is event object and ev.target refers to the div you need.
alert(ev.target.innerHTML);
}
Demo
Event object details
Trying to use equalizer plug, but id doesn't work, and no errors. It`s look like http://goo.gl/OvKy1g. Here is a page http://goo.gl/INMqUL. Do i need include some css for it.
You can use the Foundation Equalize plugin along with Twitter Bootstrap, but you need to do a couple of things to make it work.
DEMO
First, your principle issue is that foundation.js is looking for the corresponding foundation.css. Since you're using Twitter Bootstrap as your base styles, you probably don't want to have to deal with all of the potential style conflicts or having your users download another large css file. Really all that is needed is a reference to the Foundation version and namespace, so just add the following to your css:
meta.foundation-version {
font-family: "/5.4.5/";
}
meta.foundation-data-attribute-namespace {
font-family: false;
}
The second issue is with your markup. You have the data-equalizer-watch attribute applied to the containing .col-sm-4 element, but you have your border on the child element with the class latest-news-item. So change your markup to be:
<div class="row" data-equalizer>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
</div>
As you can see in the demo, I was able to get your test page to work with these changes, but I was also able to dramatically reduce the foundation.js file size by using the Custom option on the Foundation Download page and just building a js version with the equalize plugin only. The minified version was 31K. If you're not planning to use any of the other foundation plugins, you might consider using a custom file.
That said, for folks that are looking for an alternative lighter-weight approach, it might be just as easy to write your own jQuery such as by adding a class to the row you want to equalize (I called it 'equalize') and then add:
var row=$('.equalize');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});
Wrap it in a function and you can call it on resize as well if that is important to you.