I'm trying to remove the values, and hide the elements, by changing a select. I know how to hide, but I would like a remove the values if something has been written.
Here's my code :
<select v-model="switchopera">
<option :value="undefined" selected disabled
>Is the reservation under the same name ?</option>
<option :value="false"
>Yes</option>
<option :value="true"
>No</option>
</select>
<select
:required="switchopera ? false : true"
:value="switchopera ? false : true">
<option selected disabled>Title (on the reservation)</option>
<option>Mr</option>
<option>Mrs/option>
</select>
And here's my Vuejs code :
data() {
return {
switchopera: undefined
};
}
};
you can use watch property to check and do actions :
watch: {
switchopera: function(value){
// do action
}
}
Related
I have this form that has a dropdown box. Everything works fine except if you have "Please Select" selected it saves the value of it which is 0 to the database and because of that when I go to the page that displays the product, the page breaks because it can't find the category.
Here is my code
<template>
<div>
<select class="form-select form-control" v-model="newCategory">
<option value="0" selected>Please Select</option
<option v-for=category in categories" :value=category.id>
{{ category.name }}
</option>
</select>
<button class="btn btn-success" #click="save">Save</button>
</div>
</template>
<script>
export default {
props: ['categories'],
data() {
return {
newCategory: 0
}
},
methods: {
save(){
axios.post('/api/products/create', {
category: this.newCategory
}).then(response => {
this.newCategory = 0;
});
}
}
}
</script>
Just check this.newCategory before you send a request to the server. If it is 0, show a toast or something.
The code should be like this:
save(){
if(this.newCategory === 0) show something and return;
// bottom codes will be shown only in else section
axios.post('/api/products/create', {
category: this.newCategory
}).then(response => {
this.newCategory = 0;
});
}
First you need to make your newCategory field accept null values, because you need to populate it even if you are saving data without selecting option. Then try the following:
<select v-model="newCategory">
<option value="" disabled selected>Select your option</option>
<option v-for=category in categories" :value=category.id>
{{ category.name }}
</option>
</select>
data() {
return {
newCategory: null
}
},
I have a simple function that manipulates a data between true and false. I use it to make my div hidden and visible like a toggle. I also have a with three element. I found out that I cannot use #click for <option> elements, I need to use #change for my <select>.
But in this way, whenever an is selected, the function is being triggered and my data toggles between true and false. Here is my <select> element;
<select #change="isDisabled">
<option>Please select a security type</option>
<option>No Security</option>
<option>Personal</option>
<option>Enterprise</option>
</select>
IsDisabled function takes a variable and change its values between true and false so my div becomes hidden and visible as follows;
<div v-if="noSecurity">something</div>
But here is the thing, I only want to trigger the function when the user select the "No Security" option. Now it's being triggered whenever I select an option, so it turned out to be some kind of a toggle. But I want to hide the div when I select the "No Security" option and show the div if something different is selected. What should I do?
I've made a CodeSandbox where you could see the result :
https://codesandbox.io/s/magical-meitner-63eno?file=/src/App.vue
But here is the explanation:
<template>
<section>
<select #change="isDisabled">
<option>Please select a security type</option>
<option>No Security</option>
<option>Personal</option>
<option>Enterprise</option>
</select>
<div v-if="noSecurity">You Choose no security, that's dangerous !</div>
</section>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
data() {
return {
noSecurity: false,
};
},
methods: {
isDisabled(e) {
console.log("e", e.target.value);
if (e.target.value === "No Security") {
// do your change
return (this.noSecurity = !this.noSecurity);
}
// to allow reset if another option is selected
if (this.noSecurity) {
return this.noSecurity = false;
}
},
},
};
</script>
Basically when you use the #change handler, your function will receive an event, in this event you can catch the target value with event.target.value.
Doing so, you do a condition if the value is equal to No Security (so the selected item), you change your state, if it's not No Security, you do nothing, or you do something else you would like to do.
Appart from that, I advice you to change your method name isDisabled to a global convention name like handleChange, or onChange.
Pass id values in your option so when you get the select event you're clear that No security or whatver the name you would like to change will be the same.
Because if one day you change No security to another name, you have to update all your conditions in your app. Try to avoid conditions with strings values like this if you can.
<option value="1">No Security</option> // :value="securityType.Id" for example if coming from your database
<option value="2">Personal</option>
<option value="3">Enterprise</option>
then in your function it will be
if (e.target.value === noSecurityId) {
// do your change
this.noSecurity = !this.noSecurity;
}
//...
There's no need for the additional noSecurity variable. Create your select with v-model to track the selected value. Give each option a value attribute.
<select v-model="selected">
<option value="">Please select a security type</option>
<option value="none">No Security</option>
<option value="personal">Personal</option>
<option value="enterprise">Enterprise</option>
</select>
Check that value:
<div v-if="selected === 'none'">something</div>
You can still use the noSecurity check if you prefer by creating a computed:
computed: {
noSecurity() {
return this.selected === 'none';
}
}
Here's a demo showing both:
new Vue({
el: "#app",
data() {
return {
selected: ''
}
},
computed: {
noSecurity() {
return this.selected === 'none';
}
},
methods: {},
created() {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="selected">
<option value="">Please select a security type</option>
<option value="none">No Security</option>
<option value="personal">Personal</option>
<option value="enterprise">Enterprise</option>
</select>
<div v-if="selected === 'none'">something</div>
<div v-if="noSecurity">something</div>
</div>
Is using v-model instead of using a method is option for you? If it is, please try the following:
HTML:
<div id="hello-vue" class="demo">
<select v-model="security">
<option>Please select a security type</option>
<option>No Security</option>
<option>Personal</option>
<option>Enterprise</option>
</select>
<div v-if="security=='No Security'">something</div>
</div>
JS:
const HelloVueApp = {
data() {
return {
security: undefined
}
}
}
I have a simple drop down like this:
<select v-model="selected.applicationType"
v-on:change="applicationTypeChanged"
class="form-control">
<option v-for="item in applicationTypes"
v-html="item.text"
v-bind:value="item.value"></option>
</select>
The drop down is bound to a model and change event is also working as expected. But programatically I am changing the value of selected.applicationType and then I need to fire the change event of the drop down. How can I fire change event when model value is changed?
You can use a watcher for this
<select v-model="selected.applicationType" class="form-control">
<option v-for="item in applicationTypes"
v-html="item.text"
v-bind:value="item.value"></option>
</select>
export default
{
data()
{
return {
selected:
{
applicationType: null
}
}
},
watch:
{
'selected.applicationType'(newVal)
{
this.applicationTypeChanged(newVal);
}
},
methods:
{
applicationTypeChanged(newValue)
{
...
}
}
}
I want to update the v-model of the dropdown when its conditionally got disabled. Meaning I just want to reset my ir.IR_SectionId to 0 when the select box get disabled.
<select v-model="ir.IR_SectionId" v-default-value:ir.IR_SectionId="0"
:disabled="ir.IR_SecurityTypeId <= 0">
<option v-for="s in irSectionList" v-bind:value="s.Id">{{s.Name}}</option>
</select>
Let's change the :disable expression
<select v-model="ir.IR_SectionId" v-default-value:ir.IR_SectionId="0"
:disabled="isDisabled">
<option v-for="s in irSectionList" v-bind:value="s.Id">{{s.Name}}</option>
</select>
You can create a getter that updates its component to disabled and in
that case it would change the value of IR_SectionId to 0
getters: {
isDisabled: () => {
let disabled = this.ir.IR_SecurityTypeId <= 0
if(disabled) this.ir.IR_SectionId = 0
return disabled
}
}
How can I pass selected value to a vuejs function?
v-model won't help I guess.
I need to set values for the filter after
item: items | orderBy sortKey reverse
where reverse and sortKey are dynamic values.
html
<select class="sort-filter" v-on="change: sortBy(???)">
<option value="title asc">Title (A-Z)</option>
<option value="title desc">Title (Z-A)</option>
<option value="price asc">Price (Min. - Max.)</option>
<option value="price desc">Price (Max. - Min.)</option>
</select>
js
methods: {
sortBy: function (sortKey) {
console.log(sortKey)
}
}
You have several ways to do it.
Edit: Improved 2)
It is possible to use v-model just like in 2) but instead of using the value directly in your orderBy filter, you can use computed properties
computed: {
sortKey: {
get: function() {
return this.sorting.split(' ')[0]; // return the key part
}
},
sortOrder: {
get: function() {
return this.sorting.split(' ')[1]; // return the order part
}
}
}
This way, sortKey and sortOrder will be available like a normal property in you filter:
v-repeat="items | orderBy sortKey sortOrder"
1) Use javascript event:
If you don't specify any parameter, the native event object will be passed automatically
<select class="sort-filter" v-on:change="sortBy">
You can then use it like this:
methods: {
sortBy: function(e) {
console.log(e.target.value);
},
}
2) Using v-model
You can add the v-model directive
<select name="test" v-model="sorting" v-on:change="sortBy">
This way the sorting value will be updated on every change.
You can add this value in the data object of you ViewModel to be more clear:
data: {
sorting: null // Will be updated when the select value change
}
You can then access the value like in your method:
methods: {
sortBy: function() {
console.log(this.sorting);
},
}
If you just need to update the sortKey value, this method is not even necessary.
3) Other weird way
You can apparently use your model value as a parameter.
<select name="test" v-model="sortKey" v-on:change="sortBy(sortKey)">
This is working but I don't really see the point.
methods: {
sortBy: function(sortKey) {
console.log(sortKey);
},
}
This should work if you want to loop with dynamic values and can not use v-model
<select name="option" v-on:change="selectedOption($event.target.value)">
<option value="0">SELECT</option>
<option v-for="i in 10" :value="i">{{ i }}</option>
</select>
If you want to pass selected value to a vuejs function, Please do the following :
you need to use v-model directive in select tag as v-model = variableName
pass that variable as parameter like #on-change=sortBy(variableName);
So your code will look like :
<select class="sort-filter" v-model="sortingVariable" #on-change="sortBy(sortingVariable)">
<option value="title asc">Title (A-Z)</option>
<option value="title desc">Title (Z-A)</option>
<option value="price asc">Price (Min. - Max.)</option>
<option value="price desc">Price (Max. - Min.)</option>
</select>
try
<select name="option" #change="myFunction($event.target.value)">
<option v-for="item in list" :value="item.code" :key="item.code">{{ item.name }}</option>
</select>
// Function
myFunction(value) {
console.log(value);
}