I have a custom component called 'menu-entry':
<menu-entry v-for="field in fields" :id:"field.id" :ref="field.id" v-bind:key="field.id" v-bind:class="[classArray]" v-bind:field="field" v-on:clicked="menuEntryClicked">
</menu-entry>
I need to get one of them (for example field.id = 2) and remove an item from the classArray.
this.$refs[2] is working for HTML elements, but not for custom elements.
this.$el.querySelector isnt working either.
is there another way to remove an item from the classArray of a specific element?
Your question it is not clear but you are trying to set id and ref to field.id so following this logic it is not necessary to do though.
You can just send the id to the method you are executing like below:
<menu-entry
v-for="field in fields"
v-bind:key="field.id"
v-bind:class="[classArray]"
v-bind:field="field"
v-on:clicked="menuEntryClicked(field.id)" // <= send the id here
>
</menu-entry>
I am not sure if i helped but regarding your question, now you can figoure out which id of element is clicked and remove it from classArray or whatever you want
2 is not a valid id selector when you use document.querySelector('#2'); maybe you can use document.getElementById('2') instead - it can work.
Related
I have a div that contains a set of dynamic elements. I want to click on the first search result.
I want to click on the first element contains in
I tried using creating a custom xPath like so but it didn't work. Any ideas here?
//div[1][contains(text(), 'listing')]
First of all It would've helped if you had provided more information.
best will be using pseudo-child like div.firstChild or if the elements are generated dynamically you can add a class and use document.querySelectorAll(".class") which will give you an array of elements that had the class.
You can use array[0] to use click on the first element.
For anyone coming across this thread here is the solution
const listings = await page.$x('//*[contains(#id,"listing_")]')
I'm using Selenium to try and get some elements on a web page but I'm having trouble getting the ones I want. I'm getting some, but they're not the ones I want.
So what I have on my page are five divs that look like this:
<div class="membershipDetails">
Inside each one is something like this:
<div class="membershipDetail">
<h3>
VIP Membership
</h3>
</div>
They DO all have this same link, but they don't have the same text ('VIP Membership' would be replaced by something else)
So the first thing was to get all the divs above in a list. This is the line I use:
listElementsMembership = driver.find_elements_by_css_selector(div[class^='membershipDetail'])
This gives me five elements, just as I would expect. I checked the 'class' attribute name and they are what I would expect. At this point I should say that they aren't all EXACTLY the same name 'membershipDetail'. Some have variations. But I can see that I have all five.
The next thing is to go through these elements and try and get that element which contains the href ('VIP Membership').
So I did that like this:
for elem in listElementsMembership:
elemDetailsLink = elem.find_element_by_xpath('//a[contains(#href,"EditMembership")]')
Now this does return something, but it always got me the element from the FIRST of the five elements. It's as if the 'elem.find_element_by_xpath' line is going up a level first before finding these hrefs. I kind of confirmed this by switching this to a 'find_elements_by_xpath' (plural) and getting, you guessed it, five elements.
So is this line:
elemDetailsLink = elem.find_element_by_xpath('//a[contains(#href,"EditMembership")]')
going up a level before getting its results? If it is, now can I make it not do that and just restrict itself to the children?
If you are trying to find element with in an element use a . in the xpath like below:
listElementsMembership = driver.find_elements_by_css_selector(div[class^='membershipDetail'])
for elem in listElementsMembership:
elemDetailsLink = elem.find_element_by_xpath('.//a') # Finds the "a" tag with respect to "elem"
Suppose if you are looking for VIP Membership:
listElementsMembership = driver.find_elements_by_css_selector(div[class^='membershipDetail'])
for elem in listElementsMembership:
value = elem.find_element_by_xpath('.//a').get_attribute("innerText")
if "VIP Membership" in value:
print(elem.find_element_by_xpath('.//a').get_attribute("innerText"))
And if you dont want iterate over all the five elements try to use xpath like below: (As per the HTML you have shared)
//div[#class='membershipDetail']//a[text()='VIP Membership']
Or
//div[#class='membershipDetail']//a[contains(text(),'VIP Membership')]
You've few mistake in that css selector.
Quotes are missing.
^ is for starts-with, not sure if you really need that. In case it's partial matching please use * instead of ^
Also, I do not see any logic for the below statement in your code attempt.
The next thing is to go through these elements and try and get that
element which contains the href ('VIP Membership').
Code :
listElementsMembership = driver.find_elements_by_css_selector("div[class*='membershipDetail']")
for ele in listElementsMembership:
e = ele.find_element(By.XPATH, ".//descendant::a")
if "VIP Membership" in e.get_attribute('href'):
print(e.text, e.get_attribute('href'))
You can give an index using a square bracket like this.
elemDetailsLink = elem.find_element_by_xpath('(//a[contains(#href,"EditMembership")])[1]')
If you are trying to get an element using XPath, the index should start with 1, not 0.
I am having an issue when triggering the click handler in my button here. The error comes back as TypeError: Cannot read property 'discountProduct' of null when I click the button. I know for a fact that this.discountProduct.id has a value by inspecting it from the Vue Tools and by knowing that the button is rendering to begin with since it only conditionally shows if the id > 1.
I alternatively tried to remove this but it still throws the same error.
I also tried manually just inserting the product id as the param and that works so I am not sure what the issue is at this point.
<button v-if="this.discountProduct.id >= 1"
type="button"
v-on:click="addToCart(this.discountProduct.id, true)"
Is you button in the <template> tags?
If so, you do not need to use this delete from the click argument and v-if. However that should only throw a warning.
Can you also post the code for the method addToCart?
If you are not setting the full discountProduct object you will need to make sure setting the id is reactive. Like the example below:
this.$set(this.discountProduct, 'id', 1)
Nested Object/keys are not reactive without using $set. See https://v2.vuejs.org/v2/guide/reactivity.html for more details.
Hope this helps
Im using Vuetify in my project. When I insert some data by v-select its working fine. Also when Im edit that data that also works. The only problem is I cant see the selected element when Im click on Edit.
Here is my code
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="text"
item-value="customer.rating"
single-line
></v-select>
Note: If I use {{customer.rating}} it gives an output like this
{ "id": 1, "text": "Bad" }
and If I select a different element its perfectly change on database. So everything is fine. The only requirement is I want show this value Bad as a selected element when I click on Edit.
Here is the complete code of my project file https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/customers/EditCustomer.vue
Thanks in advance
It's and old question but Let me post my answer to help others as well, after alot of search I have come to this point, and I want to share it with others as well.
//This will load all your ratings in dropdown
<v-select
v-model="customer.ratings"
:items="ratings"
item-text="text"
item-value="id"
label="Rating"
dense>
</v-select>
Now Edit Part
Lets say you want to edit a record, so you will probably pass the record id in edit method of your vuejs then inside edit method of vuejs, you will do an edit axios call for that specific record to first show it inside fields and then you will update. But before update you need to do something inside edit method of your vuejs when you will have already loaded data for that specific id.
Now lets say you have received a record from database according to a specific id, you will see a dropdown id I mean to say a foreign key for a dropdown that you had saved during storing data.
Suppose you have ratings array which holds whole data for a dropdown. Inside this you are having an id and text fields. So you have this ratings array and an object from database during edit for a specific record. Now you are good to go with below code.
Inside Edit Method of vuejs
this.customer.ratings = this.ratings.find(item => item.id === parseInt(res.data.rating_id))
this.customer.ratings = parseInt(this.customer.ratings.rating_id)
Note: I am doing parseInt() it's because when you check in console the primary key is an integer like 1 but foreign key like rating_id is string i-e "1". You can also use two equals == if you are not using parseInt() but I haven't checked that.
For clearly understanding I am just sharing a sample edit code which might help you a bit
editItem(id){
axios.get( `/api/category/${id}` ).then( res => {
if(res.data.status === 200){
console.log(res.data.data)
this.name = res.data.data.name
this.id = res.data.data.id
this.parent_id = this.list_categories.find(item => item.id === parseInt(res.data.data.parent_id))
this.parent_id = parseInt(this.parent_id.id)
this.edited = true
}else{
this.$toaster.error( res.data.message )
}
});
}
I'm not sure what you mean by "... when Im click on Edit." but I will presume you mean when you click on the dropdown menu.
From what you have provided in your jsfiddle, your v-select should be like this:
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="ratings.text"
item-value="ratings"
single-line
></v-select>
This can be found here, in the API props section.
item-text: Set property of items’s text value
item-value: Set property of items’s value
The text is what you see, I believe that text which is the current value of item-text is either undefined or not declared. If this answer doesn't work, then you need to provide more of your code.
I have an hidden input field which value changes according to the option selected in a s:select in Struts 2. Then, there's a button that points to an action like loadData.action.
I would like to add to this action a parameter named item.id with the value of the hidden field as its value, a value changing each time I select a new option.
I've tried to use an s:param with an s:property inside and the name or the id of the s:hidden, but it doesn't print the value after the = sign.
How can I do to achieve this result? loadData.action?item.id=12 where 12 is the value of s:hidden name="item" id="item" ?
Please Provide complete action link and which value to be change also your HTML structure, so it will be easy to answer your question
Assuming your HTML structure's elements, I have tried to answer your question
You can change action using jQuery on change event of your <s:select>
Have a look at https://jsfiddle.net/shantaram/qy9rew4v/
$('#id-select').change( function () {
var newAction = $('#id-form').prop('action');
newAction = newAction.substring(0, newAction.lastIndexOf('='));
$('#id-form').prop('action', newAction+"="+varItemId);
//varItemId is value of your hidden field
//which you want to change Dynamically
});
provided:
id-select -> Id of your <select> element
id-form -> Id of your <form> element