I have a modal. In that modal I am displaying a table. One of tr of that table is like below
<tr>
<td class="ui header">Name</td>
<td v-if="editValue">
<input type="text">
<input type="submit" value="Submit">
</td>
<td v-else>
{{ addressObj.name }}
<span #click="change_value" class="edit_span">
Edit
</span>
</td>
</tr>
The change_value is like below
change_value() {
this.editValue = true;
}
If I click on Edit the input box is displayed but the modal is disappearing.
#click.stop.prevent="change_value"
It's likely that the click has somehow triggered the modal closing. Adding event.stopPropogation() and event.preventDefault() should help you avoid that.
.prevent add 'event.preventDefault()' to the click event
.stop add 'event.stopPropogation()' to the click event
See https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers
Related
I have a table where in each TR when I click it redirects me to another view with the detail, the idea is that I have never worked with Vue and I can't think how to disable the event when I click on the first TD tag of the table.
Before in Jquery I did it this way:
//Add onclick to TR
$('table tr').click(function(e) {
// Avoid redirecting if it's a delete button
if(!$(e.currentTarget).hasClass('delete')) {
// Not a button, redirect by taking the attribute from data-route
window.location.href = $(e.currentTarget).data('route');
}
});
But with Vue I don't know how to do it in the onclick event.
This is my table and the method
<table
id="accounts-table"
class="
table table-listbox
table-bordered_
table-responsive-md
table-striped_
text-center_
"
>
<thead>
</thead>
<tbody>
<tr v-if="tableData.length === 0">
<td colspan="4" class="text-center">
No hay oportunidades para mostrar.
</td>
</tr>
<template v-if="loading === true">
<tr colspan="9" class="text-center">
<b-spinner variant="primary" label="Spinning"></b-spinner>
<b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
</tr>
</template>
<template v-else>
<tr
v-for="(data, k) in tableData"
:key="k"
#click="viewOpportunity(k, data)"
>
<slot :row="data">
<td v-if="permissions.includes('view all opportunities')" width="10">
<div class="iq-email-sender-info">
<div class="iq-checkbox-mail">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="mailk">
<label class="custom-control-label" for="mailk"></label>
</div>
</div>
</div>
</td>
<td width="20">
<vue-avatar
:username="data.sales_man"
:title="data.sales_man"
:size="32"
v-if="data.sales_man != ''"
></vue-avatar>
</td>
<td width="5">
<template v-if="data.has_file != false">
<i
class="ri-attachment-line"
style="font-size: 20px; color: #007bff"
></i>
</template>
</td>
<td width="120" nowrap>
<template>
<p class="mb-0">{{ data.created_at }}</p>
<small class="text-info mt-5">
Fecha creación
</small>
</template>
</td>
</slot>
</tr>
</template>
</tbody>
</table>
viewOpportunity(data) {
window.location.href = "/opportunity/" + data.id;
},
For example in the first TD of the table I would like that it does not redirect me to the page but from the 2nd TD it redirects me.
On first td element use this even modifier - #click.stop
Prevent on click on parent when clicking button inside div
This kind of issue ever answered .. please have a look on this
If someone needs an href inside a table that has a that has a #click method in the row, but you wat to the link does not fire the click event in the row and also to prevent event propagation when there is no method to call, e.g. a simple <a href="mailto:someone#example.org"> link, try to use this trick with #click.self:
BEFORE
<table>
<tr>
<th>COLUMN A</th>
<th>COLUMN B</th>
</tr>
<tr #click="myMethodFromRow">
<td>Some Value</td>
<td>
<a target="_blank" :href="mailto:someone#example.org"> My link </a>
</td>
</tr>
</table>
AFTER
<table>
<tr>
<th>COLUMN A</th>
<th>COLUMN B</th>
</tr>
<tr>
<td #click="myMethodFromRow">Some Value</td>
<td #click.self="myMethodFromRow">
<a target="_blank" :href="mailto:someone#example.org"> My link </a>
</td>
</tr>
</table>
In this case I wanted to execute myMethodFromRow clicking inside each td, but not clicking the link. So I changed the myMethodFromRow method from the tr and put it into each td. But the most important trik was to use #click.self for the td with the href link.
.self only trigger handler if event.target is the element itself, i.e. not from a child element.
DOCUMENTATION: https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
Essentially, I want a table which you don't have to scroll across to page to view all its content.
Instead, if the text is too long to fit in a table, I want there to be a tooltip which compensates for this.
I don't want to set the width of the table statically, as I want it to stretch across the div in the same manner on different screens.
<tbody>
<tr v-for="row in rows">
<td tabindex="0">{{ row.longname }}
<span
v-tooltip.right="{ html: 'overrunning', class:'tooltip' }"
></span>
<div id="overrunning">
<p>The over running text</p>
</div>
</td>
<td tabindex="0">{{ row.name }}</td>
</tr>
</tbody>
I don't know how to add dynamic content in my Vue js 2 app. I'd like to add many div elements after clicking on a button. THis div should have input and after clicking on a Save button all input texts inside dynamically created divs should be sent to backend (so I use model inside my template).
<div v-if="!this.spinnerVisibleForCorrectiveActions">
<div>
<table class="p-2 table-cell">
<tr class="font-weight-bold">
<td class="vue-good-table-col-200">
<div class="mt-2 criterion">
ID
</div>
</td>
<td class="vue-good-table-col-200">
<div class="mt-2 criterion">
DZIAŁANIE
</div>
</td>
<td class="vue-good-table-col-200">
<div class="mt-2">
SZCZEGÓŁY
</div>
</td>
</tr>
<tr v-for="(actions,index) in correctiveActions" :key="index">
<td class="vue-good-table-col-200">
<span> {{actions.orderNumber}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.action}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.recommendations}}</span>
</td>
</tr>
</table>
<button class="addAction p-3 mb-2 bg-secondary text-white w-100 bg-info btn btn-success">NAdd new action</button>
<br>
</div>
How to add dynamically (multiple times) something like this and additionally to have the possibility to get all data from my dynamically created inputs after clicking on a button:
<tr v-for="(actions,index) in correctiveActions" :key="index">
<td class="vue-good-table-col-200">
<span> {{actions.orderNumber}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.action}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.recommendations}}</span>
</td>
</tr>
Ok, the answer in my case is very simple - I have to only add an empty object to my correctiveActions array:
<button class="addAction p-2 mb-2 bg-secondary text-white w-100 bg-info btn btn-success" #click="addNewAction">Nowe
działanie
</button>
and next:
methods:{
addNewAction() {
this.correctiveActions.push
({
id: undefined,
incidentId: this.incidentId,
orderNumber: this.getNextOrderNumber(),
action: undefined,
recommendations: undefined
});
},
}
I literally just started messing aroung with vuejs. I'm having problem with multiple if conditions.
This is how I'm trying to get it work:
<td v-if="!editing && selectedID === user.id">{{user.name}}</td>
<td v-else>
<input type="text" v-model="user.name" />
</td>
User clicks on edit button and sets editing prop to true, then if next condition is true it should display input, but it doesnt work. Don't know why.
Your code should work if the rest of your code and markup is correct. Since we can't see the rest of your code, I will venture a guess that your "td" elements are not in a "table" element? If that is the case it won't work. See this working example to observe the difference https://jsfiddle.net/skribe/sLaf7m0e/
<!-- Working Code -->
<table>
<tr>
<td v-if="!editing && selectedId === user.id">{{user.name}}</td>
<td v-else>
<input type="text" v-model="user.name" />
</td>
</tr>
</table>
<!-- Non Working Code -->
<div>
<tr>
<td v-if="!editing && selectedId === user.id">{{user.name}}</td>
<td v-else>
<input type="text" v-model="user.name" />
</td>
</tr>
</div>
Why this is the case is if you inspect the dom you will find that because proper markup for tables is not used the tr and td elements are ignored causing all the fields to be rendered in a single div element.
you are showing input on the else case..... you have to do it like this instead :
<td v-if="editing && selectedID === user.id">
{{user.name}}
<input type="text" v-model="user.name"/>
</td>
<td v-else>
<!-- do something else if condition is false -->
</td>
The code clicks and pops up an overlay (successful). I am able to switch to iframe (using the driver.switchTo().frame(2)). Once selecting an element and clicking the Accept button, the overlay closes. Now I switch back to the main page using driver.switchTo().defaultContent(). The problem occurs soon after the code clicks a dropdown in the main page. This dropdown is not the typical Select or Option type (Select() or <option>). The elements are listed in a <table>.
There is no error displayed in the console but the program hangs. It stops the navigation after clicking the drop down and then no response.
Please find the html portion:
<input type="hidden" name="ctl00$cph$ctl02$TEST$FORM$ctl06$ctl32$ctl01$ctl03"
id="ctl00_cph_ctl02_TEST_FORM_ctl06_ctl32_ctl01_ctl03" />
<input type="hidden" name="ctl00$cph$ctl02$TEST$FORM$ctl06$ctl32$ctl01$ctl04"
id="ctl00_cph_ctl02_TEST_FORM_ctl06_ctl32_ctl01_ctl04" value="-1" />
<input type="hidden" name="ctl00$cph$ctl02$TEST$FORM$ctl06$ctl32$ctl01$ctl05" />
<input type="hidden" name="ctl00$cph$ctl02$TEST$FORM$ctl06$ctl32$ctl01$ctl06" />
<div id="ctl00_cph_ctl02_TEST_FORM_ctl06_ctl32_ctl01_outerFrame"
class="DropdownOuterContainer theme2 boarderA font7 shadow1" style="display:none;">
<div id="ctl00_cph_ctl02_TEST_FORM_ctl06_ctl32_ctl01_innerFrame"
class="DropdownInnerContainer" style="z-index:99;">
<table id="ctl00_cph_ctl02_TEST_FORM_ctl06_ctl32_ctl01_tbl"
class="DropdownItemContainer" list="120">
<tr class="">
<td value="" index="0" title="">
</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="Act1" index="1" plid="1001">Act1</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="Act2" index="2" plid="1002">Act2</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="Act3" index="3" plid="1003">Act3</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="Act4" index="4" plid="1004">Act4</td>
<td class="BorderCell"></td>
</tr>
</table>
In the code I am trying to select an option 'Act1' using the below statements. Note that only the first line executes, i.e, it clicks the drop down but then it doesn't move forward to the next step, where the selection happens.
driver.findElement(By.xpath(".//*[#id='ctl00_cph_ctl02_TEST$FORM_ctl06_ctl32_ctl01']")).click();
driver.findElement(By.xpath(".//*[#id='ctl00_cph_ctl02_TEST$FORM_ctl06_ctl32_ctl01_tbl']/tbody/tr/td[1][contains(text(),'Act1')]")).click();