Hello guys I'm currently working on an Monitoring application for my company.
So I'm trying to use V-if and V-for in a table
My code looks like this:
<tbody v-for="server in servers" :key="server.Id">
<tr v-if="server.Show == true">{{DATA}}</tr>
If you click the red eye on the left side you can hide an Server, but it leaves the line there what it is not supposed to do. If I resize the window it'll correct it. Is there a nicer way to bring my data into the Tablebox because now I'm creating a new tablebody for each server
I'm still a student and pretty new to VUE so I hope someone can give me an explanation why this is happening.
EDIT: Spelling and a little bit of more Info
I should loop over the servers in a template and hide the row inside
<tbody>
<template v-for="(server, index) in servers">
<tr :key="server.Id" v-if="server.Show">{{DATA}}</tr>
<td>
<img src="../assets/eye.png" #click="HideServer(server,index)" />
</td>
</tr>
</template>
</tbody>
If I'm understanding you, you want to make the same without tbody tag?
In this case, you can replace tbody with template tag, this tag won't be rendered, it would be the same than make v-for and v-if at the same line.
<template v-for="server in servers">
<tr v-if="server.Show == true" :key="server.Id">{{DATA}}</tr>
Try to use the index to modify the corresponding item :
<tbody v-for="(server,index) in servers" :key="server.Id">
<tr v-if="server.Show == true">.....
<img src="../assets/eye.png" #click="HideServer(server,index)" /></td>
HideServer(server,index) {
this.servers[index]={...server,Show : false}
}
Related
Vuetify3 newbie here.
I have a table which is filled with v-for for some models. Each row has a v-select that need to fire an event when changed. Something like this:
<tr v-for="payout in payouts" :key="payout.id">
<td>{{ payout.username }}</td>
<td>
<v-select
v-model="payout.status"
#update:modelValue="changeStatus"
:items="['On', 'Off']"
>
</v-select>
</td>
</tr>
If leave function in #update:modelValue="changeStatus" without any parameters, I can get access to selected value in one v-select.
But how I can get selected value AND id of current row simultaneously?
I was thinking about something like #update:modelValue="changeStatus(item, payout.id)". But of course it doesn't work .
Instead of calling changeStatus directly, I would wrap it in a callback which dispatch update:modelValue argument AND payout.id:
<tr v-for="payout in payouts" :key="payout.id">
<td>
<v-select #update:modelValue="val => changeStatus(val, payout.id)">
</td>
</tr>
I omitted some code to make it simpler to grasp.
I have this html code
<tr v-for="(help, index) in helps">
<td scope="row">{{ help.ID }}</td>
<td scope="row">{{ help.Date | formatDateWithTime }}</td>
<td>
<p #click="fullTextFun(index)" v-show="help.FullText">{{ help.Text.substring(0,16) + '...' }}</p>
<p #click="fullTextFun(index)" v-show="!help.FullText">{{ help.Text }}</p>
</td>
</tr>
I want to be able to show the full text when someone click on the current p element. This is my vue function
fullTextFun: function(index) {
this.helps[index].FullText = !this.helps[index].FullText;
},
It doesn't work. I also tried to do it using this code
<span #click="fullTextFun(help)" v-show="help.FullText">{{ help.Text.substring(0,16) + '...' }}</span>
fullTextFun: function(item) {
item.FullText = !item.FullText;
},
But again without any luck. It seems the v-show function don't care about the status of help.FullText
When I load the data I don't have FullText variable in my helps array. I don't know if this is the problem
This is what it is inside my helps variable when first loaded
[{"ID":"2","Date":"2019-05-15
17:27:29","Text":"randomText"},{"ID":"4","Date":"2019-05-17
09:53:59","Text":"some text"}]
It might be Vue reactivity issue.
fullTextFun: function(index) {
this.helps[index].FullText = !this.helps[index].FullText;
this.helps = JSON.parse(JSON.stringify(this.helps))
}
Basically Vue only updates if you change the reference.
When you update this.helps[index].FullText, this.helps still points to old object reference, and Vue can't recognize the change.
Another solution is using Vue.set
Vue.set(this.helps[index], 'FullText', !this.helps[index].FullText)
You can read more at Vue document
Parsing vue.js' docs I can't see any hint that vue.js has something like a ng-repeat-start / ng-repeat-end
Is there a way to archive something like
<table>
<tr class="weather_warning top" ng-repeat-start="warning in dwd_warnings">
<td {{warning.valid_from}} → {{warning.valid_to}}</td>
<td><div style='background:{{warning.color}};'>{{warning.message}}</div></td>
</tr>
<tr class="weather_warning bottom" ng-repeat-end>
<td colspan="2">
{{warning.description}}<br/>
<span>Issued on the {{warning.effective}} ({{warning.headline}}). {{warning.ascertain}}</span>
</td>
</tr>
</table>
Each warning consists of 2 TRs which go together. One is the top half of the message in the iteration, the other one the lower half. It must be this way, because of some very weird formatting stuff, so there's no way around using 2 TRs for one item. Maybe some tags are off in this example, this is because I had to delete a ton of stuff in order to post it here. Note the colspan="2" in the TD of the second TR, which might give a bit of a hint of the problem which is tackled here.
Closest thing I can think of is to use a <template>, eg
<template v-for="item in items">
<header>
Header {{ item }}
</header>
<div class="body">
Body {{ item }}
</div>
<footer>
Footer {{ item }}
</footer>
</template
See https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
... you can also use a <template> tag with v-for to render a block of multiple elements
Nothing changes with your edit, you just wrap your two <tr> elements in
<template v-for="warning in dwd_warnings">
<tr class="weather_warning top">
<!-- etc -->
</tr>
<tr class="weather_warning bottom">
<!-- etc -->
</tr>
</template>
My template is:
<tbody id="deliveries-table">
<tr v-for="item in deliveries">
<td class="table-view-item__col"></td>
<td class="table-view-item__col" v-bind:class="{ table-view-item__col--extra-status: item.exclamation }"></td>
<td class="table-view-item__col">{{item.number}}</td>
<td class="table-view-item__col">{{item.sender_full_name}}</td>
<td class="table-view-item__col" v-if="item.courier_profile_url">{{item.courier_full_name}}</td>
<td class="table-view-item__col" v-if="item.delivery_provider_url">{{item.delivery_provider_name}}</td>
<td class="table-view-item__col">
<span style="font-weight: 900">{{item.get_status_display}}</span><br>
<span>{{item.date_state_updated}}</span>
</td>
</tr>
</tbody>
My javascript code for render a lot of prepared data is:
var monitorActiveDeliveries = new ActiveDeliveries();
monitorActiveDeliveries.fillTable(allDeliveries);
class ActiveDeliveries {
constructor() {
this.table = new Vue({
el: '#deliveries-table',
data: {
deliveries: []
}
});
}
fillTable (d) {
this.table.deliveries = d;
}
}
But after script starts any render into tbody, i have just empty place in HTML.
Where i got some wrong?
First, although you can instantiate your Vue app on the <table> tag, usually you want just a single Vue instance on the whole page, so it might be better to make the Vue instance on one main div/body tag.
Second, I think your code could work (I don't know what your deliveries objects should look like...), but your fillTable() method is probably not getting called, i.e. deliveries are empty.
I made this working example based on your code: http://jsfiddle.net/wmh29mds/
Life is easier than it seems.
I got a mistake into this directive:
v-bind:class="{ table-view-item__col--extra-status: item.exclamation }"
I just forgot single quotas into class name, next variant is working:
v-bind:class="{ 'table-view-item__col--extra-status': item.exclamation }"
<div class="row">
<div class="row">
<table>
<tbody>
<tr>
<td class="list-text">
<div style="background-color: transparent;">Testing this function</div>
</td>
<td class="list-buttons" rowspan="2">
Config
<a class="edit-button" href="javascript:;">Edit</a>
<a class="save-button" href="javascript:;" style="display:none;">Save</a>
Delete
</td>
</tr>
<tr>
</tbody>
</table>
</div>
I need to find the element which contains the text "Testing this function" and click to link "Config".
Can't find a way to do it.
Edited: Found a way to do it:
By.xpath("//div[#class='row']/table/tbody/tr[td/div[contains(.,'Testing')]]/td[2]/a[contains(.,'Config')]")
But maybe someone has a better solution for this?
If you have to use text, my preference would be;
By.xpath("//div[contains(text(),'Testing')]]//a[contains(text(),'Config')]") .
I prefer using "text()" to "." just for readability. Apologies if "." is actually a better approach which I wasn't aware of.
Also unless you have a specific reason, I would avoid using tightly coupled xpath. E.g. I have not used " td[2]", instead I have said the"a" can be anywhere within in the "div"