So here is my code. When I press the button with mouse it reloads page but, when I press enter key its not refreshing. Any ideas how to do it?
<template lang="html">
<div class="chat-composer">
<input maxlength="180" type="text" placeholder="mesajınızı yazınız" v-model="messageText" #keyup.enter="sendMessage">i
<button class="btn btn-primary" #click="sendMessage" onClick="window.location.reload();>Gönder</button>
</div>
</template>
here is full the code I use. So im not the expert.. I need help about it
<template lang="html">
<div class="chat-composer">
<input maxlength="180" type="text" placeholder="mesajınızı yazınız" v-model="messageText"
#keyup.enter="sendMessage">
<button class="btn btn-primary" #click="sendMessage" onClick="window.location.reload();"
>Gönder</button>
</div>
</template>
<script>
export default {
data() {
return {
messageText: ''
}
},
methods: {
sendMessage(){
this.$emit('messagesent',{
message: this.messageText,
user: {
name: $('.navbar-right .dropdown-toggle').text()
}
});
this.messageText = '';
},
},
}
</script>
You are using Vue.js, if so you can do something like this
<button class="btn btn-primary" v-on:keyup.enter="window.location.reload()"
#click="sendMessage" onClick="window.location.reload();>Gönder</button>
You can check the Key Modifiers here the https://v2.vuejs.org/v2/guide/events.html
Related
I'm using below FormulateForm to have input field with the submit button:
<div class="col-12 col-md-3">
<FormulateInput
name="product_codes"
label="Style number"
placeholder="Style number"
/>
</div>
<div class="col-12 col-md-3">
<button
type="button"
class="btn btn-primary"
#click="syncProducts"
>
Sync
</button>
</div>
I want to sent this input data to BE as an array:
<script>
export default {
name: 'SyncProducts',
data() {
return {
styleCodes: [],
}
},
}
</script>
But with this code, instead of Array of String, it sends it as a String.
I'm encountering a very strange case.
I've build a very simple example in order to present my problem.
I've 3 files : App.vue, todo2.vue, todoI.vue.
App.vue has 1 component (todo2.vue). todo2.vue has 1 component (todoI.vue).
You'll find under the code of todo2 and todoI.
The problem I'm facing is that when i press enter in the input text id #checkboxAdd, it triggers an event on the next button.
In the code below when pressing enter in the input text #checkboxAdd, it triggers the click event on the first iteration of my todoI button, which in my example calls the function del (#click="del()"), which console.log(this), logging the first iteration of the component todoI.
What is even stranger is that when I add a button just after the input text, add a #click to console.log the event, it is indeed called (instead of calling the button of the first iteration of todoI).
Does anyone understand why this happens ? Is this something I'm doing wrong ?
todo2.vue:
<template>
<div class="d-flex flex-column">
<div>
<form #submit.prevent="">
<div class="mb-3 input-group">
<div class="input-group-text">
<input type="checkbox" class="form-check-input" id="checkboxAdd" aria-describedby="checkboxAdd">
</div>
<input type="text" class="form-control" id="inputAdd" aria-describedby="inputAdd" v-model="tempI">
</div>
<ul class="list-group">
<todoI v-for="(it, k) in todos" v-model="it.v" :key="k" #delItem="del(it)"></todoI>
</ul>
<br>
</form>
</div>
</div>
</template>
<script>
import todoI from './todoI.vue'
export default {
name:"todo2",
components: {todoI},
data: function(){
return {
todos: [
{v:{
val: "Bread",
checked: false
}},
{v:{
val: "Fruits",
checked: false
}},
{v:{
val: "Ironing",
checked: false
}}
],
tempI: ''
}
},
methods:{
del (it){
this.todos = this.todos.filter(i => i!==it)
}
}
}
</script>
todoI.vue:
<template>
<li class="list-group-item d-flex align-items-center" #mouseover="btnShow=true" #mouseleave="btnShow=false">
<input type="checkbox" class="me-4" v-model="value.checked">
<div class="w-100" :class="value.checked ? checkedClass : '' ">{{ value.val }}</div>
<div class="flex-shrink-1">
<button class="btn btn-sm btn-close" v-show="btnShow" #click="del()"></button>
</div>
</li>
</template>
<script>
export default {
name:"todoI",
props:{
value: Object
},
data: function(){
return {
checkedClass:['text-decoration-line-through', 'text-muted'],
btnShow: false,
}
},
methods:{
del(){
console.log(this)
}
}
}
</script>
you can simple use #keypress or #keydown
<input type="text" class="form-control" id="inputAdd" v-model="tempI" #keypress.enter.prevent />
or
<input type="text" class="form-control" id="inputAdd" v-model="tempI" #keydown.enter.prevent = "">
My vue component like this :
<template>
<div>
...
<form class="form-horizontal" id="form-profile">
...
<input type="number" class="form-control" required>
...
<button type="submit" class="btn btn-primary" #click="submit">Submit</button>
...
</form>
...
</div>
</template>
<script>
export default {
...
methods: {
submit(e) {
e.preventDefault()
if (this.checkForm()) {
// do ajax here
}
},
checkForm() {
let field = true
$('#form-profile :required').each(function(i) {
if(this.checkValidity() == false)
field = false
})
return field
},
}
}
</script>
I using required html5 to validation
I using e.preventDefault() to prevent page redirects. Because I want to using ajax
My problem here is the required validation html5 not show if not filled. Maybe it because I using e.preventDefault()
How can I display the required html5?
In order to work as expected you have to set the v-on:submit method on the form tag, and have a button/input type "submit".
Also, notice the event modifier prevent on the #submit, it's a shorcut to not have to write e.preventDefault() on the method
new Vue({
el: '#app',
data() {
return {
myText: ''
}
},
methods: {
submitForm() {
alert('submited: ' + this.myText)
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
<form #submit.prevent="submitForm">
<input type="text" v-model="myText" required />
<button type="submit">Submit</button>
</form>
</div>
I am using vue js and html for my project and i am doing a registration. So, I have few tabs. For going to next-tab "btn-next" is the class needed. But, i need to move to next tab only if the json response i receive is true.
So, i modified my html as
<div class="wizard-footer">
<div class="pull-right">
<div v-if="response.status == false">
<button type="submit" class='btn btn-primary'>Submit Again</button></div>
<div v-if="response.status == true">
<button type="submit" class='btn btn-next btn-primary'>Next</button></div>
<div v-else>
<button type="submit" class='btn btn-primary'>Submit</button>
</div>
</div>
</div>
But when I try this way.. i am not able to move to the next tab? can anybody please help me to have a solution..
I am able to get response and move through the different conditions but i am not able to move to next tab. it means btn-next is not working when i give inside div. So, please help me to find out a solution.
My detailed code is
<div class="tab-pane" id="step2">
<form method="POST" id="form1" v-on:submit.prevent="handleSubmit($event);">
<div class="row p-b-15 ">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-6">
<div class="form-group">
<label>Contact Name :</label>
<input name="cname" type="text" class="form-control" id="cname" placeholder="Contact Name" required="required" v-model="cname" />
</div>
</div>
</div>
</div>
<div class="wizard-footer">
<div class="pull-right">
<div v-if="response.status == false"><button type="submit" class='btn btn-next btn-primary'>Next</button></div>
<div v-if="response.status == true"><button type="submit" class='btn btn-next btn-primary'>Next</button></div>
<div v-else>
<button type="submit" class='btn btn-primary'>Next</button>
</div>
</div>
</div>
</div>
</form>
</div>
My vue js code
submitBox = new Vue({
el: "#submitBox",
handleSubmit: function(e) {
var vm = this;
data = {};
data['name'] = this.cname;
data['pid'] = this.pid;
$.ajax({
url: 'hpost/contact/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status) {
vm.response = e;
console.log(vm.response);
alert("Registration Success")
} else {
vm.response = e;
console.log(vm.response);
alert("Registration Failed")
}
}
});
return false;
},
Case 1:
If the buttons are rendered correctly, please check your web server's backend code. I find that you are rendering a form with two "submit" buttons, maybe the backend does not know which submit is your expectation.
when response.status == false: Submit Again and Submit are rendered
when response.status == true: Next is rendered
but they are all normal submit buttons, does your backend or handleSubmit know that?
Case 2:
If the buttons are not rendered correctly, please check your JSON structure and vue syntax.
Noob question but I can get fields to render in Vue but not sure how to delete my fields. I added an index option in the v-for directives but not sure what to do after that. Thanks!
Here is a working JSFiddle: https://jsfiddle.net/xu55npkn/
<body>
<div id="app"></div>
<script>
const createNewOption = () => {
return {
text: '',
isAnswer: false
}
}
const createNewQuestion = () => {
return {
text: '',
options: [createNewOption()]
}
}
var vm = new Vue({
el: '#app',
template: `<div class="quiz-builder container">
<div v-for="question in questions">
<div class="input-group">
<input type="text" class="form-control" v-model="question.text" placeholder="Enter a question">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">X</button>
</span>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" #click="addOption(question)">Add an option</button>
</span>
</div>
</br>
<div class="input-group" v-for="(option, index) in question.options" style="margin-bottom: 20px">
<span class="input-group-addon">
<input type="checkbox" v-model="option.isAnswer">
</span>
<input type="text" class="form-control" v-model="option.text" placeholder="Enter an option">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">X</button>
</span>
</div></br>
</div>
<button class="btn btn-default" #click="addQuestion" :disabled="questions.length >= 5 ? true : false">
Add another question
</button>
<button class="btn btn-primary" style="background-color: #ffcc00; border: #ffcc00">
Create quiz
</button>
</div>`,
data () {
return {
questions: [createNewQuestion()],
showQuestions: false,
}
},
methods: {
addQuestion () {
this.questions.push(createNewQuestion())
},
removeQuestion (index) {
this.questions.shift(index)
},
addOption (question) {
question.options.push(createNewOption())
}
}
})
</script>
Based on your updated question, you have already solved for removing questions, although yev's answer is a much better way for removing questions.
To remove options, you need to add a new handler for removeOption that takes in both the question (which you are iterating over) and the option (which you are iterating over. Vue handles both of these scenarios for you. You can then find the index of the option and splice the array. See this fiddle.
template:
<button class="btn btn-danger" type="button" #click="removeOption(question, option)">
X
</button>
component:
removeOption (question, option) {
var index = question.options.indexOf(option);
if (index > -1) {
question.options.splice(index, 1);
}
}
Your delete button should look like:
<div v-for="(question, i) in questions">
<div>
<input v-model="question.text">
<span>
<button #click=removeQuestion(i)>X</button>
</span>
<span>
<button #click="addOption(question)">Add an option</button>
</span>
</div>
</div>
Notice I've added i (index) in your for loop and click handler for X button.
Your remove function will look like:
removeQuestion (index) {
this.questions.splice(index, 1);
}
Array.shift will remove only first item in the array which is not exactly what you want :)