I'm using Vue, v-calendar library and moment library.
I want that when a page is rendered, a input tag should get a value from getAPI(), but it doesn't.
I guess it's because start and end in the range data is ''.
so I tried to assign data into the input value directly and it worked.
but I want to know why I should assign data in to input value directly.
Is there a way that doesn't use ref and using v-calendar properties?
Thanks in advance!
This is my template code below,
<form class="form" #submit.prevent>
<Vc-date-picker
v-model="range"
:masks="masks"
is-range
:min-date="today"
>
<template v-slot="{ inputValue, inputEvents, isDragging }">
<div class="rangeInput">
<div class="eachInputWrapper">
<input
id="eachInput"
ref="startInput"
:class="isDragging ? 'text-gray-600' : 'text-gray-900'"
:value="inputValue.start"
v-on="inputEvents.start"
/>
</div>
</div>
</template>
</Vc-date-picker>
</form>
This is my script code
data(){
return{
range: {
start: '',
end: '',
},
}
},
methods:{
dateFormat(data){
return moment(data).format("YYYY-MM-DD");
},
getAPI(){
this.$thisIsAPI(Id,Data).then((data)=>{
this.range.start = this.dateFormat(data.fromDate);
this.range.end = this.dateFormat(data.expireDate);
});
},
},
created(){
this.getAPI();
}
This is what I tried, and the input tag gets the value when the page is renderd.
getAPI(){
this.$thisIsAPI(Id,Data).then((data)=>{
this.range.start = this.dateFormat(data.fromDate);
this.range.end = this.dateFormat(data.expireDate);
});
this.$refs.startInput.value = this.dateFormat(this.botInfo.fromDt);
this.$refs.endInput.value = this.dateFormat(this.botInfo.expireDt);
},
Related
How do i force user from leaving input box untill the error is resolved or value correct according to validation in vue3 ?
i want user not to leave the input box or cursor should not go to another element until the thrown error is resolved in vue3
Add blur event, and check, use ref ... if blur and if input has error, focus input.
<template>
<div class="home">
<form class="field">
<input
id="movieInput"
type="text"
placeholder="Search for a movie"
ref="movieInput"
#input="onInput"
#blur="onBlurInput"
/>
</form>
</div>
</template>
<script>
export default {
name: 'HomeView',
data: () => ({
isFieldError: true,
}),
methods: {
onInput(event) {
const { value } = event.target;
this.isFieldError = value.length < 3;
},
onBlurInput() {
if (this.isFieldError) {
this.$refs.movieInput.focus();
}
},
},
};
</script>
I have a Nuxtjs/Vuejs application within which I am creating multiple Nodes. These Nodes have the Radio button for which I have assigned v-model. However, when I change the value of one Vuejs v-model is affecting all other Node Values. Following is the code sample that I have created for the Node. The ID value is unique for each Node.
<template>
<div ref="el">
<div class="header">
Node: {{ ID }}
</div>
<div>
Syntax:
<input
id="identifierTypeURN"
v-model="identifierSyntax"
type="radio"
value="URN"
name="instanceIdentifierURN"
#change="instanceIdentifiersSyntaxChange('URN')"
>
<label for="identifierTypeURN">URN</label>
<input
id="identifierTypeWebURI"
v-model="identifierSyntax"
type="radio"
value="WebURI"
name="instanceIdentifierWebURI"
#change="instanceIdentifiersSyntaxChange('WebURI')"
>
<label for="identifierTypeWebURI">WebURI</label>
</div>
</div>
</template>
I am aware that this is happening because I am using the same v-model name for all the Nodes so I changed to something like this. But still the issue persists:
<template>
<div ref="el">
<div class="header">
Identifiers
Node: {{ ID }}
</div>
<div>
Syntax:
<div v-for="node in allNodeInfo" :key="node.identifiersId">
<div v-if="node.identifiersId === ID">
<input
id="identifierTypeURN"
v-model="node.identifierSyntax"
type="radio"
value="URN"
name="instanceIdentifierURN"
#change="instanceIdentifiersSyntaxChange('URN')"
>
<label for="identifierTypeURN">URN</label>
<input
id="identifierTypeWebURI"
v-model="node.identifierSyntax"
type="radio"
value="WebURI"
name="instanceIdentifierWebURI"
#change="instanceIdentifiersSyntaxChange('WebURI')"
>
<label for="identifierTypeWebURI">WebURI</label>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
ID: '',
nodeId: '',
eventCount: '',
bizStep: '',
allNodeInfo: [],
instanceIdentifierSyntax: ''
}
},
mounted () {
this.$nextTick(() => {
const id = this.$el.parentElement.parentElement.id
const data = this.$df.getNodeFromId(id.slice(5))
this.ID = data.data.ID
this.nodeId = data.data.nodeId
this.allNodeInfo = JSON.parse(JSON.stringify(this.$store.state.modules.ConfigureIdentifiersInfoStore.identifiersArray, null, 4))
const identifiersNode = this.allNodeInfo.find(node => node.identifiersId === this.nodeId)
this.instanceIdentifierSyntax = identifiersNode.identifierSyntax
console.log(JSON.stringify(this.allNodeInfo, null, 4))
})
},
methods: {
// On change of the IdentifierSyntax change, change the value in the respective node info
instanceIdentifiersSyntaxChange (syntaxValue) {
// Change the value of the respective syntax within the Node information in IdentifiersNode array
console.log(this.ID + " --- " + syntaxValue)
}
}
}
</script>
<style>
</style>
I know I am making some small mistake where I need to differentiate each Nodes V-model but nothing is clicking me. Can someone please help me.
You have to pass your node and your v-model also to your methods within this event.. like this, because for every loop in your v-for there will be a "new created node" which includes your v-model and than you can refer to this:
#change="instanceIdentifiersSyntaxChange('URN', node, identifierSyntax)"
In your methods you just do everything based on your node.identifierSyntax = HERE WHAT YOU WANT..
Hopefully I understood the question correct and helped you out!
EDIT: (Standard procedure)
Normally it looks like this when you add a single "input" to your v-for.
Template:
<div v-for="node in inputs" :key="node.id">
<input v-model="node.someDefinition" :value="node.someDefinition"/>
<div #change="another_Function(node, someDefinition)></div>
</div>
<button #click="add_new_Input>ADD</button>
Script:
data() {
return {
id: 0,
inputs: [{ //this is representing the first input when side will be loaded
id: this.id,
//your stuff in here as well
}]
}
}
methods: {
add_new_Input() {
this.inputs.push({
id: this.id += 1
})
}
}
This should be enough.. So in your template you have a v-for where your are looping over an array (or something else but in my case it's an array) with all inputs - be aware every input of me gets an unique ID when it will be created or added.
Also you have - in my case here - an input-tag where you can get the v-model or set the :value. It's binded to my unique node which I have created in my methods.
If you pass your #change you also have to pass the current node and the v-model / value that the correct one will be changed.
Hopefully it now helps you out!
So the process is like this. I have a form that is created from api. I want to show all the inputs except for one. That one will only be shown if the user adds value to another specific input from the form.
Something like this is the idea.
<Form>
<div-for="formItem in state.formItemData">
<template v-if="formItem.one !== ''">
<form-input
v-model="invoiceForm.two"
:key="formItem.id"
ref="two"
></form-input>
</template>
</div>
</Form>
const invoiceForm = computed({
get: () => state.forms.formData,
set: (value) => {
state.forms.formData= value
}
})
The concept in your problem is very simple, you just must make use of a computed property that evaluates if there are values in input 1 and it will rerender the component showing input2.
new Vue({
el: '#app',
data: {
input1: '',
input2: ''
},
methods: {
verification() {
console.log(this.input1);
}
},
computed: {
notEmpty() {
return this.input1 !== '' && this.input1.length > 3;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input #change="verification" type="text" v-model="input1"> <input v-if="notEmpty" type="text" v-model="input2">
</div>
You should use a v-show if you're eventually going to show/hide it when rendering, especially if it's going to be multiple times. The Vue documentation says that the v-if will not be rendered when the initial condition is false.
Source: https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show
Bootstrap-vue b-form-timepicker returns the value as with the format HH:mm:ss. I need its return value as HH:m', but I cannot find any way to change it.
Is there any way to change the return value format into HH:mm? If there is, please help.
You can remove the seconds by removing the property show-seconds as described in the component table properties. Then we'll format the date using vanilla JavaScript inside a Vue's watcher like so:
<template>
<div>
<label for="example-input">Choose a time</label>
<b-input-group class="mb-3">
<b-form-input
id="example-input"
v-model="value"
type="text"
placeholder="HH:mm"
></b-form-input>
<b-input-group-append>
<b-form-timepicker
v-model="value"
button-only
right
locale="en"
aria-controls="example-input"
></b-form-timepicker>
</b-input-group-append>
</b-input-group>
<p>Value: '{{ value }}'</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: "",
};
},
watch: {
value() {
this.value = this.value.split(':').slice(0,2).join(':');
},
},
};
</script>
You can check this working code playground example.
I'm loading a Vue component which should render a basic form. I'm trying to set the input to have a default value, but for some reason nothing shows. Here is what i tried:
<template>
...
<input type="text" value="0.02" class="form-control" v-model="amount">
...
</template>
Why does nothing show into the input field? Is it because Vue doesn't support it or i need to use something else? Thanks in advance
The reason why you don't have a default value, is that this value is overwritten by the
v-model = "amount"
In order to set a default value, it would be better to set the value of amount in the returned vue data object.
You will have something like :
data: () => {
return {
amount: 0.02 // Your default value
}
}
…
The default value is set in data as follows:
new Vue({
el:"#app",
data() { return { amount: "0.02" } }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" class="form-control" v-model="amount">
</div>