template:
methods:
In chrome: Not any list item rander only the transition-group tag tranform to section tag. And in console nothing error occurs.
Actually when I remove transition-group tag and wrap a section tag, it should have render view like this:
Please tell me what goes wrong exactly? thx.
add :key="index" attribute where you v-for the items
Related
I'm using vue-tippy 6.0.0-alpha.63 for vue3.
I have a single component on the page which has a dynamic content and want to make a tooltip from it. This tooltip should be shown when user moves mouse over one of many buttons with class skill_tab. Those buttons are nested deeply inside the parent component of the current component.
I wrapped the component content with a <tippy> component and I'm trying to bind the tooltip to the buttons using to prop but it doesn't work.
I also tried using the triggerTarget prop providing the class .skill_tab as the value, but it looks like triggerTarget only works with refs.
Component for a button:
SkillTab.Vue
<div class="skill_tab">
...
</div>
Component for the tooltip:
SkillTooltip.Vue
<tippy followCursor=true to=".skill_tab" allowHtml=true placement="bottom-end" interactive=true>
<div id="skill_tooltip" class="skill_tooltip" :class="{active}" v-if="active">
...
</div>
</tippy>
Is there any way to bind the tooltip to all the buttons without passing refs via a global state or any other simple way?
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
How can I add text to an empty list? If there's nothing added I want to have my own text.
Do I need to add v-if, .length or?
.row.pl-3.pr-3.this-row
.col-md-8
p.title Name
//- .col-md-4
//- p.title Banned products
.row.py-2.pl-3.pr-3.disrow.d-flex.align-items-center(
v-for="disease in dietDiseases"
)
.col-md-6
span {{ disease.name }}
.col-md-6.text-right
b-button(variant="danger", #click="deleteDietDiseases(disease.id)") Delete
You can add a v-if condition just before your v-for element:
.row( v-if="dietDiseases.length === 0" )
span My custom text
.row(
v-for="disease in dietDiseases"
)
...
Note that you should not add a v-else to the v-for component, since the v-for will not display content if the array is empty. You can run into unexpected issues if you use v-if/else and v-for on the same element. Source: https://v2.vuejs.org/v2/guide/conditional.html#v-if-with-v-for
EDIT: If the v-for row should not be rendered for styling reasons, you can place it inside a <template> tag which acts as an invisible wrapper:
.row( v-if="dietDiseases.length === 0" )
span My custom text
template( v-else )
.row(
v-for="disease in dietDiseases"
)
...
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 am using Vue 2 and I am using an anchor tag as a "button" (for styling purposes with an svg).
The drawback of using an anchor tag in this way is that you can't disable it in the same way as a button.
I would like to make a vue component that simply wraps an anchor tag. I would like the component to pass all properties of the custom component onto the child anchor tag so that someone can use it like this:
<custom-comp id="closeButton" title="Close" class="c-btn" #click="close" :disable="true"></custom-comp>
I want to intercept the click on the child anchor tag and only emit that if the component is not disabled.
How can I achieve this?
You can't. disable property is used only in form elements. What you're looking for here is to use v-if:
<a id="closeButton" title="Close" class="c-btn" #click="close" v-if="isConditionMatched">
Only show if isConditionMatched returns true
</a>
Or, conditionally you can use return false statement inside your method:
close() {
if(!isConditionMatched) return false;
// continue your close function
}