Vue.js - Post method not working when pressing button [closed] - vue.js

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Whenever I try to click on the button it doesn't add any records. But when I put on the input field #keyup.enter="addusers" Then it's working when I press enter. I want it to work with Add button. Can someone give me advice.
.row
input(type='text', v-model='newUser')
input(type='text', v-model='newMail')
button.btn.btn-primary(type='button' #onclick="addUsers") Add
.col-lg-12.text-left(v-for="user in users")
p {{ user.name}}- {{user.email}}
addUsers() {
axios.post('https://jsonplaceholder.typicode.com/users', {
name: this.newUser,
email: this.newMail
})
.then(({data}) => {
this.users.push(data);
});

the click event should be written #click instead of #onclick
button.btn.btn-primary(type='button' #click="addUsers") Add

Related

how to import and use other components in a component loaded from vue3-sfc-loader? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
I am using vue3-sfc-loader. I can get it working, but I am unable to use other components (also loaded from the same plugin) inside of a component. I have gone through documentation and searched whole day, but I am not able to figure out what am I missing.
I found the answer. Answering for anyone needing it.
You can use import statement with relative path to your another component inside script tag of your SFC.
Also, you need to include the component in list of components you want to use.
import currency from './currency.vue';
export default ({
props: {
...
},
components: {
'currency': currency
},
setup() {
},
...
Although someone in discussions on githhub mentions that you can use import statements.. it doesn't work.

Why does the function work except #click? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I using Vue3 and firestore
Here's my problem.
<textarea class="form-control v-model="form.comment" #keypress.enter="saveComment" required></textarea>
<button #click="saveComment">save</button>
#keypress.enter="saveComment" is works
but
#click="saveComment" did not work.
I don't know what's the difference between these two.
I used saveComment in the methods: {} in the script.
edited
When I ran the function through #keypress.enter, the page was not refreshed
But when I ran the function through #click, the page was refreshed and the function was not executed.
So I added a prevent.submit and it works well.
Considering the fact that you only shared little information on your question, I would be answering based on some assumptions.
The keypress event is an event emitted when a key that emits is character is pressed (this event is already deprecated according to MDN, so you might want to consider keyup/letdown event).
However, you should note that the #keypress.enter event according to Vuejs would only be emitted when an individual clicks on the enter Key.
#click event on the other hand would be emitted when a click event is observed on such element, in this case a button.

Vue.js 2 datepicker recommendation? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I'm looking for recommendations for a Vue.js 2.0 date picker component. My requirements are fairly simple.
Should have option to pick a range - start date, end date.
Should be stylable.
Should be able to trigger a method when a date is selected.
I've been using https://github.com/charliekassel/vuejs-datepicker so far, which is good but doesn't have the range option (unless I've missed it). This one looks promising - https://github.com/mengxiong10/vue2-datepicker - but I don't immediately see how I can trigger a method when a date is selected.
There is a component family called Element, here is the DatePicker. You can import only the DatePicker if you want (Check the "On demand" part here).
It supports range selection (type="daterange").
There is also at least two ways to catch the selection event. It has a change event, and also with the picker-options prop you can pass an onPick callback.
I am not sure about the custom styling, as I can see there is a way to give a custom class for the dropdown with the popper-class prop but I am not sure how that works.

Unable todo any action in child window, i'm using acttime application [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Unable todo any action in child window, i'm using acttime application.
Trying to create new user.
Tried with javascript and sendkeys and as well as keboard events also.
It would be great if i get solution.
Thanks in advance
Hi please check the below code that i used for my own purpose. In the code i tried to handled the windows (Parent and child windows). Use the same format of the code it can help you. Cheers.
Code:
//Clicking on Add symbol
driver.findElement(By.xpath("html/body/table[4]/tbody/tr[2]/td[2]/table/tbody/tr/td[2]/table/tbody/tr/td/table/tbody/tr/td[1]/a/img")).click();
Thread.sleep(3000L);
driver.findElement(By.xpath(".//*[#id='basicTab']/table/tbody/tr/td/table/tbody/tr[2]/td/table/tbody/tr[3]/td[2]/input")).sendKeys("Pro2");
Thread.sleep(3000L);
String HandleFirst = driver.getWindowHandle();
driver.findElement(By.xpath(".//*[#id='basicTab']/table/tbody/tr/td/table/tbody/tr[2]/td/table/tbody/tr[8]/td[2]/img")).click();
//Swithing the window
for(String handle : driver.getWindowHandles())
{
driver.switchTo().window(handle);
}
//Perform operation in new window
WebElement element1=driver.findElement(By.xpath("html/body/table/tbody/tr/td/table[2]/tbody/tr/td/form/table/tbody/tr[1]/td[3]/select"));
Select se1=new Select(element1);
se1.selectByIndex(1);
Thread.sleep(3000L);
driver.findElement(By.xpath("html/body/table/tbody/tr/td/table[2]/tbody/tr/td/form/table/tbody/tr[1]/td[4]/input")).click();
driver.close();
//Switching to original window
driver.switchTo().window(HandleFirst);
driver.quit();
}

selenium Mosue Over not working if hover property is defined in CSS [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Selenium is not able to perform mouseOver if Hover property is defined in CSS
You can try yourself on this link using selenium ide
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more2
Selenium mouse Over has no effect on this link
please visit this link
According to this question, this is one of those perennial problems Selenium and :hover css
They discuss a couple of solutions, but it looks like the problem is that as Javascript cannot trigger the :hover pseudo class, so Selenium can't either.