I want to customize the date time picker field. I am trying to append or add a suffix to the time.
My Code:
<date-picker v-model="time" class="portal-time-picker" placeholder="Pickup Time"
:leg.timeEntered="false" #input="timeEntered = true"
:config="{format: 'LT',widgetPositioning: {horizontal:'auto',vertical:'top'}}" required #dp-
change=" setUTCDate">
</date-picker>
Visual Representation of What I want:
Things I have tried:
1.
<template v-slot:default="{ value }">
<input type="text"
:value="value + ' ' + Intl.DateTimeFormat().resolvedOptions().timeZone"
placeholder="Pickup Time (timezone)" readonly>
</template>
<template>
<div>
<b-form-datepicker v-model="date" :append="suffix"></b-form-datepicker>
</div>
</template>
<script>
export default {
data() {
return {
date: null,
suffix: ' (UTC)'
}
}
}
</script>
For now I have done something temporary.
Changes:
Visually:
but I still want timezone inside the field, Need help with that.
Related
I have an input and a click button.
When I click I request a database (async/await) and finally display a table with requested data.
At the same time I display the input keyword like "{{input}} was found X times".
But then I want to do another research but the text of input is reactive and change while I'am typing. I would like to only display the new keyword input after the click.
I'm struggling to do that.
<div class="q-pa-md">
<div class="q-gutter-md" style="max-width:600px">
<q-input outlined bottom-slots v-model="gene" label="Gene Symbol :" >
<template v-slot:before>
<q-icon name="search" />
</template>
<template v-slot:hint>
Ligand or Receptor
</template>
<template v-slot:after>
<q-btn #click="search" label="Search :" />
</template>
</q-input>
</div>
Elsewhere I have this for the display:
<div class="text-h6">
<q-badge align="middle" style="background-color:#FF4F00;font-size:20px;padding:12px">
Interactions > </q-badge> {{ gene }} was found XX times.
</div>
When you use v-model, the value changes with any input change. To avoid it you can define a new variable to store the gene value whenever q-btn is clicked; Like this:
<template>
<input v-model="gene" type="text">
<button #click="search">search</button>
<div v-if="searchedFor">
{{ searchedFor }} was found X times
</div>
</template>
<script>
export default {
data() {
return {
gene: "",
searchedFor: ""
}
},
methods: {
search() {
// Clear the previous one
this.searchedFor = ""
// API fetch ...
this.searchedFor = this.gene
}
}
}
</script>
I have multiple text inputs generated in v-for directive which i have attached to one v-model variable as show below. I have a button by the respective inputs which prints the value of the current working input. Ultimately I want to extract value of the selected input without affecting the other inputs.
But apparent any change make in one input affect all the input. I super confused as to how I will achieve this. Any help will be much appreciated.
My attempted code is shown below.
<template>
<div id="app">
<div v-for="i in 5" :key="i">
<input v-model="text" type="text" :key="i" />
<button #click="printText">print</button> <span>{{ text }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
text: "",
};
},
methods: {
printText() {
console.log(this.text);
},
},
};
</script>
Take an array instead of simple variable when you use v-model in v-for
And on click pass the index with function call
Try to use
<template>
<div id="app">
<div v-for="i in 5" :key="i">
<input v-model="text[i]" type="text"/>
<button #click="printText(i)">print</button> <span>{{ text[i] }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
text: [],
};
},
methods: {
printText(index) {
console.log(this.text[index]);
},
},
};
</script>
I am using the Trix editor and trying to render some stored content inside the box, but nothing is showing.
My Trix editor component wrapper:
<template>
<div>
<input type="hidden" :id="id" :name="name" :value="storedContent ? storedContent : 'blank'" />
<trix-editor :input="id"></trix-editor>
</div>
</template>
<script>
import Trix from "trix";
export default {
props: ["id", "name", "storedContent"]
};
</script>
The editor on the page doesn't render anything, regardless if I provide the stored-content prop.
It just shows an empty editor.
However, on inspection the hidden input does show the stored-content (or 'blank') on the page.
<input id="job-full-desc" type="hidden" name="full_description" value="blank">
The 'blank' value gets overwritten as soon as I write anything in the box.
Any thoughts?
I tried the following , when the component created I manually add the value to trix innerHTML
hoppefully can assist you thaks
<template>
<div>
<input :id="id" type="hidden" :name="name" :value="value">
<trix-editor ref="trix" :input="id" :placeholder="placeholder" style="min-height:300px"></trix-editor>
</div>
</template>
<script>
import Trix from 'trix';
import 'trix/dist/trix.css';
export default {
props: ['name', 'value', 'placeholder', 'shouldClear' , 'id'],
mounted () {
this.$refs.trix.innerHTML = this.value;
console.log(this.$refs.trix.innerHTML);
}
};
</script>
In this example, I'm trying to fit the value from div id="message" into textarea using the Vue v-model construct, but this not work
<template>
<div>
<textarea v-model="text"></textarea>
</div>
<div>
<div id="message" v-model="text2">{{ comment.message }}</div>
<button #click="update(text2);">
Edit
</button>
</div>
</template>
<script>
export default {
data() {
return {
text: [],
text2: null
}
},
methods: {
/* not work */
update(text2) {
this.text = text2;
}
}
<script>
How do I make sure that when I click on the "edit" button, the value of v-model="text2" insert into v-model="text" ?
You cannot use v-model on a <div> because it isn't an input element.
It seems what you want to do is set text to the comment message when you click the edit button so that it can be edited by the textarea. All you have to do is pass comment.message as the argument:
<button #click="update(comment.message)">
A couple of other things:
You cannot have multiple root elements in your template (you have two root <div> elements). You can just wrap everything in a single <div>.
text has initial value [] which isn't compatible with a textarea's v-model; did you mean ''?
Not too sure what is wrong here, it seems fine to me! I'm simply trying to update the data property display to true when I click the input within my component.
I have passed the data to the slot scope, so can't see that being the issue. It just simply won't update, using a function to toggle it works, however not what I really want to do, seems pointless.
<time-select>
<div slot-scope="{ time }" class="is-inline-block">
<label for="businessHoursTimeFrom"><i class="fas fa-clock"></i> From</label>
<input type="text" name="businessHoursTimeFrom[]" v-model="time" v-on:click="display = true">
</div>
</time-select>
The code behind:
<template>
<div>
<p>{{ display }}</p>
<slot :time="time" :display="display"></slot>
<div class="picker" v-if="display">
<p>Test</p>
</div>
</div>
</template>
<script>
export default {
props: [],
data: function () {
return {
time: '',
display: false
}
},
mounted() {
},
methods: {
}
}
</script>