The (change) directive is working fine with normal select html tag in angular 5. But if I implement select2 plugin, then (change) won't work.
Here is my html file
<select class="select2Select" [(ngModel)]="productSearchItem" (ngModelChange)="test()">
<option value="">Search entire store here...</option>
<option *ngFor="let product of products" value="{{ product.pid }}">{{ product.name }}</option>
</select>
Here is the function doing nothing just consoling something in typescript
test(){
console.log("Hi");
}
Script:
$(document).ready(function() {
$('.select2Select').select2();
});
Do the change event using jquery inside the lifecycle hook:
ngOnInit() {
$('.select2Select').on('select2:select', function (e) {
console.log("Hi");
});
}
Related
I am looking for help on how to display the second option in a select drop-down menu after the select menu is disabled.
It is disabled if there are fewer than 2 options left. The first option is the 'Please select' option but I would like it to display the one remaining option which is the second option. i.e. 'Scotland' in the code below. The data is pulled in using an Axios call so I do not know what the value will be.
Any help would be greatly appreciated.
The select menu code
<select disabled="disabled">
<option disabled="disabled" value="">Select nationality</option>
<option value="Scotland"> Scotland </option>
</select>
Vue
computed: {
selectDisabled: function() {
return this.options.length <= 2;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="quantity" :disabled="selectDisabled">
<option disabled value="">Select</option>
<option v-for="option in options" :value="option">{{option}}</option>
</select>
</div>
You need to create a special computed property that will dynamically tell the <select> which option it should show inside itself. <select> show the option that matches the <select>'s value.
So:
When the select is disabled (has less than 2 options) force it's value to be the value of the first listed option (this.options[0]).
When the select is enabled, pass the normal value selected by the user (this.value)
I've implemented the logic you need below (make sure to click "Run snippet"):
const App = {
el: '#app',
template: `
<div>
<!--
Remember that writing v-model="quantity" is the same as writing :value="quantity" #input="quantity = $event"
(or #input="quanity = $event.target.value" if you put in HTML elements)
You can't use v-model="valueFormatted" here because this would be the same as writing
:value="valueFormatted" #input="valueFormatted = $event.target.value"
So that's a mistake, because valueFormatted is a computed and you can't assign to it
(unless you create a special computed with a setter, but that's not what you need right now)
-->
<select :value="valueFormatted" #input="value = $event.target.value" :disabled="disabled">
<option disabled="disabled" value="">Select nationality</option>
<option v-for="option in options" :value="option">{{option}}</option>
</select>
<hr>
<div>
<button #click="options = ['Scotland']">Make the select have 1 item</button>
<button #click="options = ['Scotland', 'Poland']">Make the seelct have 2 items</button>
</div>
</div>
`,
data() {
return {
options: ["Scotland", "Poland"],
value: '',
}
},
computed: {
disabled() {
return this.options.length < 2
},
/*
* If this.disabled is true, returns the value of the first option
* If it's false, it returns the normal value from data (user selected)
*/
valueFormatted() {
//watch out - this computed will return undefined if this.disabled is true and if options is empty
//to avoid that, you can do for example this:
//return this.disabled === true ? (this.options[0] ?? '' ) : this.value;
return this.disabled === true ? this.options[0] : this.value;
},
},
}
new Vue(App);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<body>
<div id="app" />
</body>
</html>
You're probably going to use this select's value later to make eg. an API call, so make sure to send this.valueFormatted instead of this.value
I am trying to create selected dropdown with vue JS
The code following :
<select v-model="selected"> IDR
<option value="IDR"><strong>Mata Uang</strong> </option>
<option>Rp Indonesia Rupiah</option>
<option>US$ U.S.Dolar</option>
</select>
So the question is how do i give name select tag? i try to add "IDR" but still can't show the "IDR" text
How to solve this or any suggestion about this?
The below code helps to get name and value:
var app = new Vue({
el: '#app',
data (){
return {
selected:null
}
},
methods:{
onChange(e){
console.log("name:" + document.getElementsByTagName("select")
[0].getAttribute("name") + " value:" + e.target.value )
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<select #change="onChange" v-model="selected" name="IDR">
<option value="IDR"><strong>Mata Uang</strong> </option>
<option>Rp Indonesia Rupiah</option>
<option>US$ U.S.Dolar</option>
</select>
</div>
I'm not 100% sure, wether i understand the question correct. You can add some name or ref attribute to the select either via HTML or the vue api for ref.
<select v-model="selected" name="IDR" ref="IDR">
<!-- Options -->
</select>
However, if you want to display a default option to the user then have a look at this answer.
I'm very new to Vue and I'm doing Vue just because I need to use it in a project. Right now, I'm trying to populate a 'Select' by performing an API call. However, it is not working. Here's the code.
<template>
<form method="POST">
<label>
Website Name
</label>
<select name="website_id">
<option v-for="item in this.websiteData" :value="item.id">{{item.domain}}</option>
</select>
<input type="submit"/>
</form>
</template>
<script>
export default {
async beforeMount() {
await fetch('/api/get-website').then(res=>res.json()).then(data=>this.websiteData = data.map(item=>item));
console.log(this.websiteData);
},
// name: "FormComponent"
data(){
return {
websiteData: [],
postData: null
}
},
methods: {
}
}
</script>
<select name="website_id">
<option v-for="item in websiteData" :value="item.id">
{{item.domain}}
</option>
</select>
Typo in websiteData. In template you can access variables without this.
I am trying to change the selected option on page load. When the page is loaded and new or used is not null the I want which ever on that is not null to be selected instead of it alway selecting status. I have tried many things and nothing has worked and have not been able to fin much online about how to make this work.
I have tried it with and without v-bind, without v-model, and other ways that I saw online.
<select id="application-status" class="custom-select" v-model="selected">
<option :value="null" disabled>Status</option>
<option :value="'new'" v-bind:selected="item.new != null">New</option>
<option :value="'used'" v-bind:selected="item.used != null">Used</option>
</select>
Right no no matter what Status always shows up.
You need to set the value of selected in some manner. One way is, as Sphinx pointed out in their comment, is to use a mounted() lifecycle hook:
const app = new Vue({
el: "#app",
mounted() {
this.selected = "used";
},
data() {
return {
selected: "",
item: "new"
};
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.min.js"></script>
<div id="app">
<select id="application-status" class="custom-select" v-model="selected">
<option :value="null" disabled>Status</option>
<option :value="'new'" v-bind:selected="item.new != null">New</option>
<option :value="'used'" v-bind:selected="item.used != null">Used</option>
</select>
</div>
I want to get value from select tag. So I bind a variable with v-model like below.
HTML:
<div id="action_panel">
<select id="work_type" v-model="type">
<option value="" disabled selected></option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<div>
JS:
var vm = new Vue({
el: '#action_panel',
data: {},
methods: {
addWorks: function(emp_id) {
console.log(type);
}
}
});
console.log() returns the whole html entity of select tag.
I got no clues on vue.js doc.
The type variable is never declared. You should declare it as data of your application before using it.
https://jsfiddle.net/gurghet/mwy5uLb4/