I use v-for to render table rows
<table>
<tr v-for="(item, i) in data">
<td>
<button v-if="...">....</button>
<el-tooltipplacement="right">
<button v-if="..." >...</button>
<div slot="content">
<button #click="...">...</button>
<button #click="...">...</button>
</div>
</el-tooltip>
</td>
</tr>
</table>
The tooltip is a component of element ui,
the tooltip will display after hovering the button.
The table data is gotten by ajax call,
and there are several pages,
it will get the data by ajax call while turning page,
the problem occurs after turning page.
Some tooltip will not display after hovering,
I assumed the problem is doms don't re-render,
I used $forceUpdate() after ajax call,
but it had no effect.
If you can please help me out.
element ui Tooltip component and exmaple： https://element.eleme.io/#/en-US/component/tooltip
Related
I have a sidebar component located in a view-router view component that renders several child component buttons. It renders the child components using v-for loops.
<div v-for="type in this.facebookLightButtons" :key="type">
<SidebarButton :type="type"/>
</div>
<div v-for="type in this.facebookButtons" :key="type">
<SidebarButton :type="type"/>
</div>
facebookLightButtons is simply an array of strings containing the text of the button (which is also the name of the image source of the button). The result is the following:
The corresponding code in the SidebarButton components are:
<template>
<div>
<router-link :to="'/' + capitalizeFirstLetter(type)" class="sidebar-button">
<table>
<tr>
<td>
<img class="sidebar-button-icon" :src="getImage" />
</td>
<td>
<p>{{capitalizeFirstLetter(type)}}</p>
</td>
</tr>
</table>
</router-link>
</div>
</template>
and
computed: {
getImage() {
return require('#/assets/images/SidebarIcons/' + this.type + '.png');
}
}
When I change to a new view-router view and then return to the home page where this sidebar is located, the images are all missing:
I am trying to figure out how to keep the images there when returning to the home page.
Things I have tried:
Clearing and setting the image source in the SidebarButton components in the created, beforeMount, mounted, activated, deactivated, updated, and unmounted lifecycle hooks (non of which seemed to work).
Clearing the image, waiting for 2000 milliseconds using setTimeout() and then setting the image to the correct image source
Wrapping both the contents of the SidebarButton template as well as the v-for loop in the parent component with a <keep-alive> tag
Hard coding each SidebarButton component instead of using a v-for loop
It seems like something must be missing. What can I do to ensure that these images stored locally on my computer not only show when first displayed, but also appear when the user returns to the homepage after entering a separate view-router view?
I'm new to Vue and having a hard time nesting a v-if inside a v-for. Everything renders but {{row.id}} (inside my v-if) is showing the last element in my array instead of the selected one. The function work fine as I pass row as an argument. I'm assuming I have to do something similar here but I can't find an example or explanation in the docs.
Is there a way to pass the entire array to my modal template or do I have to structure this differently?
<tr v-for="row in rows">
<td><img v-bind:src="row.image" height="180" width="130"></td>
<td>{{row.title}}</td>
<td>{{row.platform}}</td>
<td>
<button id="edit"><img v-on:click="onClickEdit(row)" #click="showModal = true" src='images/edit.png' height='30' width='30'></button>
<modal v-if="showModal" #close="showModal = false">
<h3 slot="header">{{row.id}}</h3>
</modal>
</td>
</tr>
Any help is appreciated :)
The problem is that each row has a modal. It's not that the modal is showing the last element only, it's that when showModal is true, all modals is displayed, the last modal is on top and the other modals are below it.
quickest way to make this work is to set showModal to the row.id
#click="showModal = row.id"
and for the modal, use row.id for the v-if
<modal v-if="showModal === row.id" #close="showModal = false">
I tried to continue with the example on the vuejs website. I tried to add images and a transition state when I sort data.
However it doesn't work. I have tried to add the following line to make it works but it doesn't:
<tbody name="table-row" is="transition-group">
Do you have some ideas for me?
https://codepen.io/wooza/pen/wezqXP
https://codepen.io/anon/pen/gRmxwJ
https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions
Unlike <transition>, it renders an actual element: a <span> by
default. You can change the element that’s rendered with the tag
attribute.
<transition-group tag="tbody" name="table-row">
<tr v-for="entry in filteredData" :key="entry.name">
//...
</tr>
</transition-group>
I am opening this page http://www.ebay.com/itm/Apple-iPhone-5-16GB-White-Silver-Factory-Unlocked-/151097083750?pt=Cell_Phones&hash=item232e168766
and checking to see if the blue ribbon is visible as mentioned in the image
Here is my test
<tr>
<td>open</td>
<td>/itm/Apple-iPhone-5-16GB-White-Silver-Factory-Unlocked-/151097083750?pt=Cell_Phones&hash=item232e168766</td>
<td></td>
</tr>
<tr>
<td>isVisible</td>
<td>//div[#class='vi-notify-msg']</td>
<td></td>
</tr>
And expecting it to fail but surprisingly it passes every time...what am i missing here?
EDIT:
I am expecting the test to fail because the ribbon takes time to appear after the page is loaded and the command isVisible executed before the ribbon is visible..so it should fail right?
If you look at the HTML, the element is there as the page loads. It's only styled to fade in after the page finishes loading, but from an HTML perspective, it's "visible" the entire time the page is loading:
As the page is loaded:
<div id="vi_notification" class="vi-notify-cmp" style="top:25%;">
<div class="vi-notify-container vi-notify-shadow">
<div class="vi-notify-icon vi-notify-icon-img"></div>
<div class="vi-notify-msg">28 people are viewing this item per hour.</div>
<div class="vi-notify-close">
<button id="vi_notification_cls_btn" class="vi-notify- close-btn">x</button>
</div>
</div>
</div>
Only after it fades out does the styling change to display:none:
<div id="vi_notification" class="vi-notify-cmp" style="top: 25%; left: 10px; display: none;">
<div class="vi-notify-container vi-notify-shadow">
<div class="vi-notify-icon vi-notify-icon-img"></div>
<div class="vi-notify-msg">28 people are viewing this item per hour.</div>
<div class="vi-notify-close">
<button id="vi_notification_cls_btn" class="vi-notify-close-btn">x</button>
</div>
</div>
</div>
If you look at the element as it loads using the Chrome Developer toolbar, you'll see where it is "visible", but the styling updates to slowly fade it in so our human eyes can see it.
This means that when the page is loading / loaded, the element will return as displayed. After it fades out, I would expect displayed to return false, since the styling on the parent div was changed to display:none.
I am having an interesting issue with dijit widgets and widgets inside widgets. I have a custom widget that I created that houses a dijit.dialog with a form. Here is a sample
<div dojoattachpoint="WorkinProgress">
<div dojoType="dijit.Dialog" id="formDialog" title="Agent Note" >
<table>
<tr>
<td>
<label for="desc">
Description:
</label>
</td>
<td>
<input dojoType="dijit.form.Textarea" style="width:400px" type="text" name="desc" id="desc">
</td>
</tr>
<tr>
<td align="center" colspan="2">
<button dojoType="dijit.form.Button" type="submit" dojoattachevent="onclick: createNote >
SAVE
</button>
<button dojoType="dijit.form.Button" type="button" onClick="dijit.byId('formDialog').hide();">
CLOSE
</button>
</td>
</tr>
</table>
As you can see the dialog is nested inside my WorkInProgress widget. The form in the dialog itself needs to be able to call a function inside the WorkInProgress widget to post the data of the form to a webservice. I have tried using dojoattachevent but have not gotten anywhere. How do I, from the my template file, get access to the parent of the widget the dojo button resides in. Any help would be greatly appreciated. Thanks!
If you're adding the child widget dynamically, try to use dijit._Widget.placeAt function to include the DOM nodes inside. Apparently, just adding the HTML string to the parent widget only adds the root DOM of the child widget (in your case, the second div). After doing that, you should be able to get the parent info from the dojoAttachPoint, etc.
Why not give the buttons, dialog and outermost widget dojoAttachPoint attributes and then in the postCreate function of your custom widget do something like:
dojo.connect(this.createNoteButton, "onclick", this, this._createNoteHandler);
Then create a function on your custom widget called '_createNoteHandler' and do what you need to do there.
The advantages of this approach are that you can use pub/sub rather than dojo.connect for multiple handlers for 1 event, you are in greater control over the interaction, you don't litter your markup with the names of functions that may change (better separation of concerns)...