I need the checkbox to be always unchecked.
I tried by binding the checked attribute to a false property from data and set #input/change listener to do nothing and using v-model but none of them does work as expected.
Code here
https://jsfiddle.net/uv2hntba/
handle the click event (e) and call e.preventDefault()
or use the #click.prevent shortcut
js:
new Vue({
el: '#app',
data: {
},
methods: {
preventThisClickEvent(e) {
e.preventDefault()
}
}
})
html
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" :checked="checked" #click="preventThisClickEvent" /> prevent by method
<br/>
<input type="checkbox" :checked="checked" #click.prevent="doNothing" /> prevent by shortcut
</div>
Related
I have a form that updates a product's information using a form with use:enhance and actions defined in +page.server.ts - However, whenever I submit the form, use:enhance resets the form elements and they all become blank, which is unexpected as the value for these elements is specified by $page.data.product, and the docs state that use:enhance runs invalidateAll.
Nonetheless, is there a way to stop this reset from occurring within the use:enhance function?
If you return a function from the use:enhance action, that function will be called when you get a response from the form submit. This function in turn gets an update function which takes an option reset that you can give the value false to not reset the form:
<script>
import { enhance } from '$app/forms'
</script>
<form
method="POST"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
>
<input type="text" name="name" />
<button>Submit</button>
</form>
As of #7326, you can pass a reset: false option to the update function in your enhance callback:
<script>
import { enhance } from '$app/forms';
</script>
<form
method="POST"
use:enhance={() => {
return async ({ update }) => {
update({ reset: false });
};
}}>
<input type="text" name="name" />
<button>Submit</button>
</form>
I want to disable chrome autocomplete in my v-form. How do I do that? I don't see a autocomplete property on the v-form.
https://next.vuetifyjs.com/en/api/v-form/
While it is a property on a normal html form
https://www.w3schools.com/tags/att_form_autocomplete.asp
By setting autocomplete="username" and autocomplete="new-password" on v-text-field you can actually turn off the autocomplete in chrome.
here is a code that worked for me:
<v-form lazy-validation ref="login" v-model="validForm" #submit.prevent="submit()">
<v-text-field
v-model="user.email"
label="Email"
autocomplete="username"
/>
<v-text-field
v-model="user.password"
label="Password"
type="password"
autocomplete="new-password"
/>
<v-btn type="submit" />
</v-form>
Edit: autocomplete isn't set as a prop in vuetify docs but if you pass something to a component which isn't defined as prop in that component, it will accept it as an attribute and you can access it through $attrs.
here is the result of the above code in vue dev tools:
and here is the rendered html:
I wasn't able to get autofill disabled with the above methods, but changing the name to a random string/number worked.
name:"Math.random()"
https://github.com/vuetifyjs/vuetify/issues/2792
use autocomplete="off" in <v-text-field
<v-text-field
autocomplete="off"
/>
Just add:
autocomplete="false"
to your <v-text-field> or any input
autocomplete="null"
This one prevents Chrome autofill feature
I have not been able to get any of the previous proposals to work for me, what I finally did is change the text-flied for a text-area of a single line and thus it no longer autocompletes
Try passing the type='search' and autocomplete="off" props.
I also ran into a similar problem. Nothing worked until I found this wonderful Blog "How to prevent Chrome from auto-filling on Vue?" by İbrahim Turan
The main catch is that we will change the type of v-text-field on runtime. From the below code you can see that the type of password field is assigned from the value fieldTypes.password. Based on focus and blur events we assign the type of the field. Also, the name attribute is important as we decide based on that in the handleType() function.
I'm also pasting the solution here:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<div v-if="isloggedin" class="welcome">
Welcome {{username}}
</div>
<div v-else id="form-wrapper">
<label for="username">Username: </label>
<input
v-model="username"
class="form-input"
type="text"
name="username"
value=""
autocomplete="off"
/>
<label for="password">Password: </label>
<input
v-model="password"
class="form-input"
:type="fieldTypes.password"
name="password"
value=""
#focus="handleType"
#blur="handleType"
autocomplete="off"
/>
<button class="block" type="button" #click="saveCredentials">
Submit Form
</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
username: '',
password: '',
isloggedin: false,
fieldTypes: {
password: 'text',
}
}
},
methods: {
saveCredentials() {
this.isloggedin = true;
},
handleType(event) {
const { srcElement, type } = event;
const { name, value } = srcElement;
if(type === 'blur' && !value) {
this.fieldTypes[name] = 'text'
} else {
this.fieldTypes[name] = 'password'
}
}
}
}
</script>
I am creating a Todo Application using Vue.js, Express.js, and MongoDB.
I want to change the state of the fields that appear as v-for through the checkbox.
The code I want is to change the state of the text when the checkbox is checked and to show another element with v-if.
Here is the code I wrote: But it does not work.
If I have the wrong code, please help me.
List Component
<template>
<div class="todos">
<div v-for="todo in todos" v-bind:key="todo._id" class="todo">
<div>
<input type="checkbox" v-model="todo.done" v-on:click="completeTodo(todo)">
<del v-if="todo.done">{{todo.title}}</del>
<strong v-else>{{todo.title}}</strong>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
todos: {}
}
},
created () {
this.$http.get('/api/todos')
.then((response) => {
this.todos= response.data
})
},
methods: {
completeTodo (todo) {
todo.done = !todo.done
}
}
}
</script>
You don't need v-on:click="completeTodo(todo)". v-model is already doing the trick for you. Also, the todos in your code should be defined and instantiated as array not an object.
v-model is used for two way data binding. That means, whatever data you pass from your code will be bound to the checkbox value in this case and whenever a change is made from UI and value of checkbox is altered by user, that will be captured in v-model variable. v-model is a combo of :value prop and #change event in case of checkbox, hence, it is able to update data in both the ways.
Please refer this snippet.
var app = new Vue({
el: '#app',
data: {
todos: [
{
id: 1,
title: 'Study',
done: false
},
{
id: 2,
title: 'Work',
done: false
},
{
id: 3,
title: 'Play',
done: false
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="todos">
<div v-for="todo in todos" :key="todo.id">
<div>
<input type="checkbox" v-model="todo.done"/>
<del v-if="todo.done">{{todo.title}}</del>
<strong v-else>{{todo.title}}</strong>
</div>
</div>
</div>
</div>
I want to send over a computed property at the same time as editing a textfield so there is no button to "save" however I cannot work out how to get the property value from another field or from the computed data to pass over.
Here is my code so far, activeNote.id can be viewed in the template no problem but I want to pass its value whenever I type into the textarea
<template>
<div class="editor">
<form id="editForm">
<h2>Edit</h2>
<button #click="closeEdit()">Close</button>
<textarea
v-bind:value="activeNote.text"
#input="editNote"
class="form-control"
></textarea>
<input v-bind:value="activeNote.id" name="id" readonly />
</form>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
methods: {
// not sure this is best practice to dispatch from here
editNote(e) {
this.$store.dispatch('editNote', e)
// activeNote.id doesnt work here unfortunatly
this.$store.dispatch('noteId', activeNote.id)
//console.log(activeNote.id)
}
closeEdit() {
//console.log('emitclose')
this.$emit('closeEdit')
}
},
computed: mapState({
activeNote: state => state.activeNote
})
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
It was simple in the end so fyi the changed code that worked, adding this.
<template>
<div class="editor">
<form id="editForm">
<h2>Edit</h2>
<button #click="closeEdit()">Close</button>
<textarea
v-model="activeNote.text"
#input="editNote"
class="form-control"
></textarea>
<input v-bind:value="activeNote.id" name="id" readonly />
</form>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
methods: {
editNote(e) {
this.$store.dispatch('editNote', e)
this.$store.dispatch('noteId', this.activeNote.id)
},
closeEdit() {
this.$emit('closeEdit')
}
},
computed: mapState({
activeNote: state => state.activeNote
})
}
</script>
How do I autosubmit the selection made with Twitter Bootstrap typeahead()??
http://twitter.github.com/bootstrap/javascript.html#typeahead
There is a clean way using the updater callback:
input.typeahead({
'source' : ['foo', 'bar'],
'updater' : function(item) {
this.$element[0].value = item;
this.$element[0].form.submit();
return item;
}
});
When user selects an option (either by mouse click or keyboard), the callback populates the input box and sends the form.
If you use the external typeahead.js plugin (recommended for Bootstrap 3):
To trigger a form on select just use the custom events.
$('#my-input')
.typeahead({/* put you options here */})
.on('typeahead:selected', function(e){
e.target.form.submit();
});
More info on custom events here and demo about JSfiddle.
Might not be the best solution, but I just tried this on my typeahead setup locally and it worked.
If your typeahead looks something like this...
<form id="test-form" method="post" action="">
<input id="test-input" type="text" data-provide="typeahead"
data-source='["1","2',"3"]' />
</form>
Then you can submit it with this javascript.
<script type="text/javascript">
$('#test-input').change(function() {
$('#test-form').submit();
});
</script>
Apparently there are a few git merge requests. This one does the job and allows you to send an array of objects to typeahead: https://github.com/twitter/bootstrap/pull/1751
I added a blur callback on the input. Be aware that you need to wait for a short period, that typeahead can change the value in the input and the blur callback is not called before that. It's just a workaround, but it works.
$('input.myTypeaheadInput').blur(function(e) {
window.setTimeout(function() {
window.console && console.log('Works with clicking on li item and navigating with the keyboard. Yay!');
}, 50);
});
To populate a value of a hidden field in an html form from the typeahead data selection, I did the following:
$('#prefetch').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'trees',
source: trees,
limit: 15
}).on('typeahead:selected', function(e) {
var result = $('#prefetch').val()
$('#formpane input[name=\"myID\"]').val(result)
});
For reference, here's the html code:
<body>
<div id="formpane">
<form action="/thanks" method="POST">
<input class="typeahead" type="text" placeholder="select categories" id="prefetch">
<button type="submit">Submit</button>
<input type="hidden" name="myID" />
</form>
</div>
<script type="text/javascript" src="js_file_above.js"></script>
</body>