How to fix vmodel selected option vue js - javascript

So I have a web app where the user chooses from a list of options. Look at the following code:
<div class="form-group">
<select v-model="étatArticle" class="form-control">
<option value="" disabled selected>Indique l'état de ton article</option>
<option value="neuf">Neuf</option>
<option value=tresBon>Trés bon état</option>
<option value="bon">Bon état</option>
</select>
</div>
The problem is is that the v-model is causing the first selected option to disappear. to understand what I'm saying , look at the following images.
With v-model
Without v-model I get this
enter image description here
can you please help me fix that? thank you.

new Vue({
template: '#main',
data:
{
etatArticle: null
}
}).$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
<template id="main">
<div class="form-group">
<select v-model="etatArticle" class="form-control">
<option :value="null" disabled selected>Indique l'état de ton article</option>
<option value="neuf">Neuf</option>
<option value=tresBon>Trés bon état</option>
<option value="bon">Bon état</option>
</select>
</div>
</template>

In your component data, you need to define the default value of your v-model. You can see example in my codesandbox.
In your template:
<select v-model="selectedValue" class="form-control">
<option value="" disabled selected>
Disabled and selected by default
</option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select>
In your data:
data() {
return {
// Define your value by default to show it
selectedValue: "",
};
},

Related

How to disabled dropdown select conditionally in Vue JS

I'm learning vue js, and am trying about conditional input group with vue js. I have 2 radio buttons, and 1 dropdown select. What I want is when Radio 1 is selected, the dropdown is enabled. and when Radio 2 is selected, the dropdown is disabled. I have made the code as below. Can anyone help me?
new Vue({
el: '#app',
data: {
radioTypes: [
{
name:'Type 1',
value:60
},
{
name:'Type 2',
value:70
}
],
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />
<div id="app">
<div v-for="data in radioTypes" v-bind:key="data.name">
<input type="radio" v-model="radioVal" name="storage-type" :id="'storage'+data.name.toLowerCase()" :value="data.name">
<label :for="'storage-'+data.name.toLowerCase()">{{data.name}}</label>
</div>
<div>
<select id="inputGroupSelect01" :disabled="radioTypes.name === 'Type 2'">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
You don't have to create a computed property, you can just check it like this.
new Vue({
el: '#app',
data: {
radioVal: '',
}
});
<div id="app">
<input type="radio" v-model="radioVal" name="radioType" value="one">
<label for="Radio1">Radio 1</label>
<input type="radio" v-model="radioVal" name="radioType" value="two">
<label for="Radio1">Radio 2</label>
<div>
<!-- Disable the select when radioVal value is two -->
<select id="inputGroupSelect01" :disabled="radioVal === 'two'">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
In addition to the other answer, it's probably worth noting that a computed should ideally be pure and not have what is called "side effects". That basically means a computed should not change other variables, but return something based on other variables (hence the name "computed"). So, like this:
radioEnable(){
return this.radioVal === 'one';
}
But as stated, you don't even need the computed here.

How to push object to existing array in Vue.js

In the below code I have a value and that is an object how to can I push to the exist array.
methods: {
onChange(event) {
this.newItems.push(event.target.value);
console.log(event.target.value);
}
}
and my blade is:
<select #change='onChange($event)' class="form-control">
<option value="" selected disabled>Choose</option>
<option v-for='item,key in items' :value="item">#{{ item.name }}</option>
</select>
I would suggest using v-model on the select to detect which is currently selected.
<div id="app">
<select #change="onChange" class="form-control" v-model="selected">
<option value="" selected disabled>Choose</option>
<option v-for='item,key in items' :value="item">#{{ item.name }}
</option>
</select>
<p v-for="newItem in newItems">
{{newItem}}
</p>
</div>
and then push this.selected in your onChange method instead:
this.newItems.push(this.selected)
Hope this helps.
Working fiddle of your code with some small modifications:
https://jsfiddle.net/MapletoneMartin/e4oth98p/7/

Selecting next "select" item in jQuery

I wanna make a dependable dropdown but I can't reach the child dropdown with jQuery:
These are the elements:
var types = $('#categorias').next('div').next('select[name="type_id"]').html();
console.log(types);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group">
<label for="category_id">Categoría</label>
<select id="categorias" class="form-control" name="category_id">
<option value="">Elegir categoría: </option>
<option value="1">Frutas y verduras</option>
<option value="2">Alimentos a granel</option>
<option value="3">Alimentos envasados</option>
<option value="4">Bebidas</option>
<option value="5">Art. de aseo personal</option>
<option value="6">Art. de limpieza</option>
</select>
</div>
<div class="form-group">
<label for="type_id">Tipo de producto</label>
<select name="type_id" class="form-control">
<option>Elegir tipo de producto: </option>
<option value="1">Tomate</option>
<option value="2">Plátano</option>
<option value="3">Naranja</option>
<option value="4">Manzana</option>
<option value="5">Palta</option>
<option value="6">Papa</option>
<option value="7">Spaghetti 5</option>
<option value="8">Cabello de Ángel</option>
</select>
</div>
I can't reach the code of the second dropdown to remove all the options from it and repopulate it with the new options.
I'm trying:
$('#categorias').first().closest('div').next('select[name="type_id"]');
but all I get is undefined or an empty set.
EDIT: I should clarify that this is just one select within a group of forms that can be created dynamically so I just want to reach the next one without accidentally removing several of them or having to add them individual ids.
To go from one select to the next one use the format:
$('select').closest('div.form-group').next('div.form-group').find('select')
.closest() traverses up the DOM, and .find() down.

Opencart change default value of list

I have a list where you can choose an option. I need to change default value to my own. Is it possible in Opencart?
<div class="form-group required" id="form1">
<label class="control-label" for="input-option227">Choose</label>
<select name="option[227]" id="frmdocumentsForm-r1" class="form-control" wtx-context="0128A83E-7CFB-40AA-836C-8D17569841BF">
<option value=""> --- Please choose an option --- </option>
<option value="17">AAAA</option>
<option value="18">BBB</option>
<option value="19">CCC</option>
<option value="44">DDD</option>
</select>
</div>
I need to change value "17" -> "AAA"
Thanks
change attribute value with loop . If you need replace only 1st value 17 check for if condition.
$( "select > option").each(function() {
$(this).attr('value',$(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=""> --- Please choose an option --- </option>
<option value="17">AAAA</option>
<option value="18">BBB</option>
<option value="19">CCC</option>
<option value="44">DDD</option>
</select>

How to set default option in select with Angular?

I'm trying to set the "Seleccionar tamaño" option as default but I cant..
<select name="tamano" ng-model="pizza.initial_prize" class="form-control select">
<option ng-value="0">Seleccionar tamaño</option>
<option ng-value="pizza.fam">Familiar</option>
<option ng-value="pizza.med">Mediana</option>
<option ng-value="pizza.peq">Pequeña</option>
</select>
Can someone explain me how?
Thank you.
assign 0 in pizza.initial_prize
Controller
$scope.pizza.initial_prize=0;
in your <!-- app.js -->
$scope.pizza.initial_prize = 0;
You can also use ng-init :
<select name="tamano" ng-model="pizza.initial_prize" ng-init="pizza.initial_prize= options[0]" class="form-control">
<option ng-value="0">Seleccionar tamaño</option>
<option ng-value="pizza.fam">Familiar</option>
<option ng-value="pizza.med">Mediana</option>
<option ng-value="pizza.peq">Pequeña</option>
</select>
Use selected as follows:
<option ng-value="0" selected>Seleccionar tamaño</option>

Categories