I would like to avoid image value in below code.image is a key for property. How can I do that ?
<tbody>
<tr v-for="obj in data" :id="obj.id">
<td v-for="property in obj">{{property}}</td>
</tr>
</tbody>
The Accepted answer is an anti-pattern because you should not mix v-for and v-if on the same node in VueJs 2+ as Thomas van Broekhoven pointed out. Instead, you can just chain a filter onto the object. Here is an example using an ES6 arrow function which should* work.
Untested syntax. Typing on my phone, in bed.
<tbody>
<tr v-for="obj in data" :id="obj.id">
<td v-for="property in obj.filter(property => property !== 'image')">{{property}}</td>
</tr>
</tbody>
Let check it out: v-for with an Object, v-for with v-if.
<td v-for="(value, property) in obj" v-if="property!='image'">
{{value}}
</td>
Related
I have a vuejs-datatable, and now I want to have an option-column with edit- / delete-links.
This is the table-body which gets iterated from the function getRows():
<tbody>
<tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
<td>{{row.id}}</td>
<td>{{row.email}}</td>
<td>
<b-icon-pencil-square></b-icon-pencil-square>
<b-icon-trash></b-icon-trash>
</td>
</tr>
</tbody>
Now the td with the {{row.id}} and {{row.email}} are fine. However the :data-id="row.id" displays only the id of the first entry. Links in every row in my table have the same data-id. I do not understand why this is happening and what am I doing wrong.
Use code below (notice, it's not using data-id):
<tbody>
<tr v-for="(row, idr) in get_rows()" v-bind:key="idr">
<td>{{row.id}}</td>
<td>{{row.email}}</td>
<td>
<b-icon-pencil-square></b-icon-pencil-square>
<b-icon-trash></b-icon-trash>
</td>
</tr>
</tbody>
I'm having a problem with my table when I scroll to the right
this is my code
TableComponent.vue
<div id="main-container">
<table class="maint-table">
<thead id="table-header">
<tr>
<th class="dates"> </th>
<th v-for="data in dateHeader">{{data}}</th>
</tr>
<tr>
<th class="title"> </th>
<th v-for="data in dayOfWeek">{{data}}</th>
</tr>
</thead>
<tbody id="table-body" #scroll="fixedScroll">
<table_block :table_data="dataHeader"></table_block>
<table_block :table_data="allData"></table_block>
</tbody>
</table>
</div>
...
...
...
<script>
components: {
table_block
},
methods: {
fixedScroll() {
fixedScroll(event) {
var thead = document.getElementById("table-header");
var tbodyScroll = document.getElementById("table-body").scrollLeft;
thead.scrollLeft = tbodyScroll;
}
</script>
I made a props to pass the data to my TableBlock to loop through the data and display it on the table. This is my TableBlock Code.
TableBlock.vue
<template>
<div>
<tr v-for="row in table_data">
<td>
<div class="drop-down-container"><span class="drop-down-controller"">{{ row.title }}</span></div>
</td>
<td v-for="cel in row.data" class="group-header">{{ cel }}</td>
</tr>
</div>
</template>
When I scroll it to the right, the first column must freeze but it's not.
I tried to create a dummy data inside TableComponent.vue with a normal HTML Table without passing the data to another component using props, it works perfectly. But when I use these codes, it doesn't work correctly.
Scenario
Let say I have 10 columns in the table, when I scroll it to the right, the 1st column will stick which is normal but when the 10th column reach to 1st column, the 1st column will scroll away together with the 10th column.
I'm trying my best to illustrate the scenario but this is the best that I can do. If someone can help, please help me.
Since my searches doesn't suffice my issue, I'm posting it here to have some clarification on how to properly use v-if and v-else in <td> tags in HTML table in Vue.
//given the value of this.property is name
<tr>
<td v-if="this.property == 'name'">I'm name</td>
<td v-else>No I'm not</td>
</tr>
And my problem is, even though my this.property value is 'name' or NOT a 'name' it always falls to the v-else condition, and v-if is not executed. The output I want is to execute the v-if if the this.property value is 'name' and v-else if not.
Am I doing it the right way? I need your guidance here.
Remove this pointer. You don't need it.
//given the value of this.property is name
<tr>
<td v-if="property === 'name'">I'm name</td>
<td v-else>No I'm not</td>
</tr>
I have a component called in another component witch use a v-for loop. But I can't get the property in the loop and don't understand why.
here is the code https://jsfiddle.net/playoutprod/octw411z/1/
Trouble append on this line (17) :
<td v-for="h in hs"/>{{h}}</td>
I tried this :
<td v-for="h in hs" :h="h"/>{{h}}</td>
witch render correctly with same error (but shows that "hs" array is well populated)
<tr>
<td h="date debut"></td>
<td h="date fin"></td>
<td h="formateur"></td>
<td>En savoir +</td>
</tr>
In the code:
<td v-for="h in hs"/>{{h}}</td>
You are closing your td in />.
So the code above is actually:
<td v-for="h in hs"></td>{{h}}</td>
Which is why you get h as undefined.
Fix: Don't close the td:
<td v-for="h in hs">{{h}}</td>
Updated JSFiddle here.
Using Selenium Webdriver for FF/IE using C# (.Net)
Below is my page source and I am trying to use the CssSelector to find/contains the particular name from my page and i have tried with the below code but resulting in error, any help?
//code
driver.FindElement(By.CssSelector("td:contains('John John')"))
//error:
e {"Unable to find element with css selector == td:contains('John John')"} System.Exception {OpenQA.Selenium.NoSuchElementException}
//my html code:
<div id="ctl00_ContentPlaceHolder1_AddeCardControl1_gv_ctl01_RecordCount" style="float:right; padding-right:10px; margin-top:3px;">
<b>308</b> Items Found
</div>
</td>
</tr>
<tr class="item">
<td align="center">Edit</td>
<td align="center" style="width:15px;"></td>
<td>John John</td>
<td> </td>
<td> </td>
<td> </td>
<td><img src="check.png" alt='Active' style='display: ;' /></td>
<td>9/7/2012 11:15:08 PM</td>
</tr>
<tr class="altItem">
<td align="center">Edit</td>
<td align="center" style="width:15px;"></td>
<td>John Schulz</td>
<td> </td>
<td>Visitors</td>
<td> </td>
<td><img src="check.png" alt='Active' style='display: ;' /></td>
<td>9/7/2012 6:28:29 PM</td>
</tr>
<tr class="item">
<td align="center">Edit</td>
<td align="center" style="width:15px;"></td>
<td>Parker Smith</td>
<td> </td>
<td>Visitors</td>
<td> </td>
<td><img src="check.png" alt='Active' style='display: ;' /></td>
<td>9/7/2012 6:01:28 PM</td>
</tr>
<tr class="altItem">
<td align="center">Edit</td>
<td align="center" style="width:15px;"></td>
<td>Test 123</td>
<td> </td>
<td>Visitors</td>
<td> </td>
<td><img src="check.png" alt='Active' style='display: ;' /></td>
<td>9/7/2012 1:36:45 PM</td>
</tr>
<tr class="item">
<td align="center">Edit</td>
<td align="center" style="width:15px;">
The :contains pseudoselector is not part of the W3C CSS Selector standard. As such, browsers do not support selecting elements using it. Some JavaScript CSS selector engines (Sizzle, the engine used by jQuery, for example) provide a :contains pseudoselector, but its presence cannot be relied on.
If you must find an element by the text contents of the element, your only solution at this point is to use XPath. A (very poorly performing) example of how to find this in your case would be as follows:
IWebElement element = driver.FindElement(By.XPath("//td[contains(., 'John John')"));
Note that a better solution will always be to have the application you're automating have proper IDs for the elements you need to find. You should be using text to find elements only as a last resort.
You can try this
var webElements = (Driver.FindElements(By.XPath(elementXpath))).ToList();
webElements.FindIndex(item => item.Text.Contains("John John").Click()
where "elementXpath" is path to each cell in table "names". So you get the list of names and then just find a match. You'll get your item clicked.
You may have better luck using the javascript executor to click the element. I am using a very slow IE9 64bit emulator and it seems the only way to click on certain buttons is to use the javascript executor.
CSS selectors aren't very useful here, because CSS selectors work on the html structure i.e. type, relationship and attributes of web elements; they don't work well on the html content, which in this case is the internal text content 'John John'.
But, xpath will work for this job. The function you need is text() which returns the element's inner text content:
//td[text()='John John']
So your webdriver code should look like this:
driver.FindElement(By.xpath("//td[text()='John John']"));
P.S. All locators verified using Firepath in firefox.
You can use the below code:
driver.FindElement(By.XPath("//td[contains(text(), 'John John')"));