Default the current month in input type month in vue.js - vue.js

I am trying to get the current month in an input type month in vue.js, but I have no clue how, does anybody have a clue please?
HTML:
<input type="month" v-model="month">
JS:
data()
{
return{
date: new Date().toISOString().slice(0,10)
};
},


Your v-model attribute on your input element is not referencing your date data property. It does not know where to bind its input value:
<input type="month" v-model="date">
From the docs:
You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.


I got the problem, the slice was not doing the right amount it should be:
new Date().toISOString().substr(0,7)
instead of
new Date().toISOString().substr(0,10)

Related

Vuetify Datepicker- Enabled multiple property but showing wrong selected Dates count

I have to show date field. After giving multiple true, the picker is showing wrong value.
Added code:
<v-date-picker :landscape="$store.state[parentName].landscape" v-model="$store.state[parentName].picker"
:multiple= "true"
#input="handleInput" >
</v-date-picker>
Please help me out. From where this 10 selected is coming. Where did i went wrong.

I think from your code, your v-model data, $store.state[parentName].picker already have any value.
You can see this value using Vue.js devtools.
If don't have any value on v-model, please anotate the comment.
If you already have any value, and you don't expect
You should clear the $store.state[parentName].picker in beforeMount or beforeCreate.

v-select/Vue: How to enter value not in the list?

I'm trying to find a way to add a new value using v-select previously not in the list. So that the new value entered will become the selected option.
This is my current code:
<v-select
ref="systemSelect"
v-model="reservation.system"
name="system"
label="Select System"
:disabled="isBusy"
:options="systems"
#input="getSystems"
/>
In UI the component looks like this. Here I use Vuex only to get :options. Currently if I enter a new value and click outside that value disappears since its not found in the list
Expected: Would like to enter a new value and use this value as current in the form and save it. Is there a way to achieve this?
Any help would be appreciated.
Thanks!

If you're using vue select, you can use the attribute taggable and multiple to push your own options:
<v-select taggable multiple />
See this link:
https://vue-select.org/guide/values.html#tagging

Using repeat.for with bound number

Consider sample below:
//edit.html
<input type="number" step="1" value.bind="number" />
<div repeat.for="num of number">${num}</div>
//edit.ts
export class Edit {
number: number = 2;
}
I expect to see 2 divs on first page load and number of divs should change when I change number in input. Instead I get error
Value for 'number' is non-repeatable

I figured it out. If you bind input field to variable, even when variable is number, it will be changed to string when changed by user. In my case, number became string once changed in input field. I used this gist to help me solve this problem:
https://gist.github.com/jdanyow/d9d8dd9df7be2dd2f59077bad3bfb399
It offers custom element and attribute for binding numbers to input fields.

Vue.js—Difference between v-model and v-bind

I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value. I completed it using v-model but, the instructor chose v-bind:value and I don't understand why.
Can someone give me a simple explanation about the difference between these two and when it's better use each one?

From here -
Remember:
<input v-model="something">
is essentially the same as:
<input
v-bind:value="something"
v-on:input="something = $event.target.value"
>
or (shorthand syntax):
<input
:value="something"
#input="something = $event.target.value"
>
So v-model is a two-way binding for form inputs. It combines v-bind, which brings a js value into the markup and v-on:input to update the js value. The js value must be present in your data, or in an inject.
Use v-model when you can. Use v-bind/v-on when you must :-) I hope your answer was accepted.
v-model works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use v-model with input type=date if your model stores dates as ISO strings (yyyy-mm-dd). If you want to use date objects in your model (a good idea as soon as you're going to manipulate or format them), do this.
v-model has some extra smarts that it's good to be aware of. If you're using an IME ( lots of mobile keyboards, or Chinese/Japanese/Korean ), v-model will not update until a word is complete (a space is entered or the user leaves the field). v-input will fire much more frequently.
v-model also has modifiers .lazy, .trim, .number, covered in the doc.

In simple words
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa.
but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
check out this simple example: https://jsfiddle.net/gs0kphvc/

v-model
it is two way data binding, it is used to bind html input element when you change input value then bounded data will be change.
v-model is used only for HTML input elements
ex: <input type="text" v-model="name" >
v-bind
it is one way data binding,means you can only bind data to input element but can't change bounded data changing input element.
v-bind is used to bind html attribute
ex:
<input type="text" v-bind:class="abc" v-bind:value="">
<a v-bind:href="home/abc" > click me </a>

v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. But v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
v-model is intended to be used with form elements. It allows you to tie the form element (e.g. a text input) with the data object in your Vue instance.
Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/
v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change
Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/
Hope this helps you with basic understanding.

There are cases where you don't want to use v-model. If you have two inputs, and each depend on each other, you might have circular referential issues. Common use cases is if you're building an accounting calculator.
In these cases, it's not a good idea to use either watchers or computed properties.
Instead, take your v-model and split it as above answer indicates
<input
:value="something"
#input="something = $event.target.value"
>
In practice, if you are decoupling your logic this way, you'll probably be calling a method.
This is what it would look like in a real world scenario:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input :value="extendedCost" #input="_onInputExtendedCost" />
<p> {{ extendedCost }}
</div>
<script>
var app = new Vue({
el: "#app",
data: function(){
return {
extendedCost: 0,
}
},
methods: {
_onInputExtendedCost: function($event) {
this.extendedCost = parseInt($event.target.value);
// Go update other inputs here
}
}
});
</script>

Oracle Jet ojInputNumber component gives type="text"

Currently I am building a hybride app for android devices. I am trying to use the ojInputNumber component to force a numeric keyboard show up on the device. Unfortunately, the component binding always gives type="text".
I have a list of objects which contains traits, while looping over traits, the following snippet will be loaded on screen based on the entrytype.
<div class="inputNumberWraper" data-bind="if: trait.getEntryType() === 'MANUALNUM'">
<input class="inputNumer"
data-bind="attr: {id: trait.getTraitCode()}
, ojComponent: {component: 'ojInputNumber'
, value: trait.getValue()
, min: trait.getMinValue()
, max: trait.getMaxValue()
, optionChange: changeListener
, required: trait.isMandatory() }"/>
<span data-bind="ojModule:{name: 'inputComponents/inputNumberFixer'}" />
</div>
I have tried to load a module (inputNumberFixer) after this the component is binded. To manually change the input type from text to number with jquery.
$(document).ready(function(){
$('.inputNumer').attr("type", "number");
$('.oj-inputnumber-button').hide();
});
this works until I select another object from the list and the input fields "refreshed". The type I have changed is put back to text but the inputnumberfixer did not run for the 2nd time.
Does anyone know how to force this component to bind the input type to number?

Unfortunately, no. There is not a way to force this today(v2.0.0 of JET). The ojInputNumber component is a generated component that provides the "spinner" option for easily increasing and decreasing the number value, but it does not set the number type so that the proper number keyboard shows up on a mobile device.
I've filed an ER for this to be fixed to show the proper keyboard. It should change in a future release.