I'm designing a form that can both used to create and edit something.
The form has a dropdown, which isn't initialized when created, but is set with a value when used for editing.
I want to be able to modify the value of the drop down, both for creating & updating, yet is only working when the mode is CREATE.
Here's my template:
<template>
<v-row justify="center">
<v-form ref="form" v-model="valid" lazy-validation>
<v-text-field v-model="title" label="Title*" :rules="rules.fieldRules" prepend-icon="mdi-text">
</v-text-field>
<v-text-field v-model="website_link" label="URL" prepend-icon="mdi-web">
</v-text-field>
<h3>Description</h3>
<text-editor #update:modelValue="getValue" :rules="rules.fieldRules" :modelValue="description">
</text-editor>
<br />
<v-select v-model="selectedState" :readonly="false" :items="items" filled label="Which state?*" prepend-icon="mdi-help"></v-select>
<v-file-input v-model="files" prepend-icon="mdi-camera" multiple label="File input"></v-file-input>
<v-layout v-for="file of files" :key="file">
<v-img :src="generateUrl(file)" max-width="10%" max-height="10%">
</v-img>
</v-layout>
<v-combobox v-model="tags" prepend-icon="mdi-lightbulb" label="Tags" chips clearable multiple filled
rounded></v-combobox>
<v-btn :disabled="mode == 'EDIT' ? false : !valid" color="success" class="mr-4" #click="validate">
Validate
</v-btn>
<v-btn color="blue" class="mr-4" #click="backToProfile">
Back
</v-btn>
</v-form>
</v-row>
</template>
selectedState is a computed method described as below here:
selectedState: {
get() {
if (this.mode == 'CREATE') {
return this.state
} else {
const state = this.items.filter((item) => item.value = this.currentConcept.state)[0].title;
this.setState(state);
return this.state;
}
},
set(value) {
console.log(`value: ${value}`)
this.state = value;
}
}
Am I missing something?
TIA
I have created a dropdown menu in vuetify which looks like this:
[![enter image description here][1]][1]
`
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-btn text v-on="on">
Details
</v-btn>
</template>
<v-list>
<v-list-item>
<v-form ref="form">
<v-radio-group v-model="metrics" required>
<v-radio
label="ABC"
value="abc"
></v-radio>
<v-radio label="XYZ" value="xyz"></v-radio>
</v-radio-group>
<v-divider></v-divider>
<v-radio-group v-model="order" required>
<v-radio
label="Higher"
value="higher"
></v-radio>
<v-radio
label="Lower"
value="lower"
></v-radio>
</v-radio-group>
<v-divider></v-divider>
<v-btn
#click="
sortTableData(
metrics,
order,
$props.tableItems
)
"
>
Apply
</v-btn>
</v-form>
</v-list-item>
</v-list>
</v-menu>`
however,
when I click the Dropdown and select for eg:Installs, the menu
closes..
I have to click the Dropdown again to choose higher/lower..
and the menu closes again..
And again I have to click the Dropdown to Click "Apply" button.
Question : Is there Any way I can hold this menu until I click "Apply"?
Thanks a lot in advance for your help !
Ok, the idea here is to manually handle the dropdown visibility instead of letting Vuetify controls this.
To do so, you need to:
add a :close-on-content-click="false" on your <v-menu> (doc)
add a v-model directive binded to a "data" boolean value (ex: v-model="isDropdownDisplayed"), initialized to false (closed dropdown at load)
The first prop tells Vuetify to not close the dropdown when clicking on content (only an outside click will do it), while the second prop is linking the dropdown visilibity to your custom data boolean value.
As your "data" boolean value is initialized to false (closed dropdown) and is automatically updated to true via the v-model when opening the dropdown, the left thing to do is to pass this value to false on your sortTableData method.
Assuming you're using SFC (but the approach is the same for pure JS components):
Template
<v-menu offset-y :close-on-content-click="false" v-model="isDropdownDisplayed">
...
</v-menu>
Script
{
name: 'MyComponent',
data: function () {
return {
isDropdownDisplayed: false
}
},
methods: {
sortTableData: function (/* args */) {
// ...
this.isDropdownDisplayed = false
// ...
}
}
}
I'm currently using the datepicker component in one of my projects. The component is supposed to throw an error message if I click in and out of the empty textfield of the datepicker menu. So far the error message only works if I enter a value and then remove it again.
There are already rules which check if the date-value of the textfield is longer than 0 Digits or not null.
HTML
<div id="app">
<v-app id="inspire">
<v-container grid-list-md>
<v-form v-model='validForm'>
<v-layout row wrap>
<v-flex xs12 lg6>
<v-text-field
v-model="text"
clearable
label="Regular Textfield"
:rules="rulesDatefield"
v-on="on"
></v-text-field>
<v-menu
v-model="menu1"
:close-on-content-click="false"
full-width
max-width="290"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model='date'
clearable
label="Datefield"
readonly
:rules="rulesDatefield"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="date"
#change="menu1 = false"
></v-date-picker>
</v-menu>
</v-flex>
</v-layout>
</v-form>
<v-btn :disabled="!validForm" #click='printValues()' color='primary'>Create</v-btn>
</v-container>
</v-app>
</div>
JS
new Vue({
el: '#app',
data: () => ({
validForm: false,
text: '',
date: '',
menu1: false,
rulesDatefield: [
v => String(v).length > 0 || 'Field is empty!',
v => v !== null || 'Field is empty!'
]
}),
methods: {
printValues: function() {
window.alert('Entered Text: ' + this.text + '\nEntered Date:' + this.date)
}
}
})
Codepen: https://codepen.io/anon/pen/XLLNZM?&editable=true&editors=101
I expect an error message from the date-textfield like in the regular textfield above if I enter and exit the datepicker without selecting a date.
<v-text-field
v-model="date"
clearable
readonly
label="Datefield"
:rules="rulesDatefield"
v-on="on"
#blur="date = date || null"
></v-text-field>
Seems strange but works, as you intended.
So whenever I click the "edit" button, a dialog pops up with a scrollbar where I can fill out information. But when I click "cancel" or "save" and then click that same "edit" button, the dialog pops up at the same scroll position. I would like to, every time when I click "edit" and the dialog opens up, be always at the top of the dialog page not where I left off last.
<template>
<!-- <div class="text-xs-center" v-if="storeState.admin" lazy> -->
<v-dialog
transition="dialog-bottom-transition"
scrollable
fullscreen
v-model="sheet"
v-if="storeState.admin"
lazy
persistent
>
<template v-slot:activator="{on}">
<v-btn flat color="green" dark icon v-on="on">
<v-icon>edit</v-icon>
</v-btn>
</template>
<div background-color="transparent" style="margin: auto auto 0 auto">
<v-card px-5 max-width="800px">
<v-card-title>
ADD SCHOLARSHIP
</v-card-title>
<v-form v-model="addDisabled" validation ref="editForm">
<v-container>
<v-layout wrap>
<v-flex
xs12
md4
>
<v-text-field
v-model="scholarship.title"
label="Scholarship name"
:counter="maxLength"
:rules="[maxLength_rules.max, minLength_rules.min]"
required
></v-text-field>
</v-flex>
<v-flex xs12 md4>
<v-text-field
v-model="scholarship.faculty"
label="Faculty"
:counter="maxLength"
:rules="[maxLength_rules.max, minLength_rules.min]"
required
></v-text-field>
</v-flex>
<v-flex xs12 md4>
<v-text-field
v-model="scholarship.dollarAmount"
label="Award amount"
required
:rules="[amount_rules.range, minLength_rules.min]"
></v-text-field>
</v-flex>
<v-flex ml-2 xs12 sm6 md4>
<v-menu
ref="menu2"
v-model="menu2"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="availableDate"
transition="scale-transition"
offset-y
full-width
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="scholarship.available"
label="Date Available"
prepend-icon="event"
:rules="[minLength_rules.min]"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="availableDate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="menu2 = false">Cancel</v-btn>
<v-btn flat color="primary" #click="$refs.menu2.save(availableDate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-flex>
<v-flex ml-2 xs12 sm6 md4>
<v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="dueDate"
transition="scale-transition"
offset-y
full-width
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="scholarship.deadline"
label="Due Date"
prepend-icon="event"
readonly
:rules="[minLength_rules.min]"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="dueDate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="menu1 = false">Cancel</v-btn>
<v-btn flat color="primary" #click="$refs.menu1.save(dueDate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-flex>
<v-flex xs12 md1>
<v-text-field
v-model="scholarship.requiredGpa"
label="Min GPA"
required
:rules="[gpa_rules.range, minLength_rules.min]"
></v-text-field>
</v-flex>
<v-flex xs12>
<v-textarea
outline
height="400"
v-model = "scholarship.description"
label="Scholarship Description"
:rules="[minLength_rules.min]"
></v-textarea>
</v-flex>
</v-layout>
</v-container>
</v-form>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat #click="sheet = false" >cancel</v-btn>
<v-btn color="primary" #click="updateFields(scholarship)" :disabled="!addDisabled" flat >SAVE</v-btn>
</v-card-actions>
</v-card>
</div>
</v-dialog>
<!-- </div> -->
</template>
<script>
import { store } from "../store.js";
import EDITSCHOLARSHIP from '../graphql/updateScholarship.gql'
export default {
data: () => ({
sheet: false,
valid: false,
dueDate: '',
availableDate: '',
storeState: store.state,
addDisabled: true,
menu1: '',
menu2: '',
gpa: '',
title: '',
faculty: '',
amount: '',
maxLength: 255,
description: '',
gpa_rules: {
range: v => v <= 4.00 && v >= 0.00 && v.length <=4 || 'GPA may only be within 0.00 - 4.00',
},
amount_rules: {
range: v => v <= 999999999.00 && v >= 0.00 || 'Amount must only contain numbers between 0.00 - 999999999.00',
},
maxLength_rules: {
max: v => v.length <= 255|| 'Max character length is 255',
},
minLength_rules: {
min: v => v.length > 0 || 'Required',
}
}),
props: {
scholarship: Object
},
methods: {
validate () {
if (this.$refs.editForm.validate()) {
this.addDisabled = false
}
},
editScholarship(scholarship) {
if (this.$refs.editForm.validate()) {
this.$apollo.mutate({
mutation: EDITSCHOLARSHIP,
variables: {
id: scholarship.id,
input: {
available: this.availableDate,
deadline: this.dueDate,
description: this.description,
dollarAmount: this.amount,
faculty: this.faculty,
requiredGpa: this.gpa,
title: scholarship.title,
visible: true,
}
}
}).then( (data) => {
this.$emit('showSnackbar', 'Scholarship successfully updated', 'success')
this.sheet = false
}).catch( (error) => {
this.$emit('showSnackbar', 'Scholarship update failed', 'error')
//this.text = error
//this.color = "error"
//this.snackbar = true
})
}
},
updateFields (scholarship) {
this.dueDate = scholarship.deadline
this.availableDate = scholarship.available
this.gpa = scholarship.requiredGpa
this.title = scholarship.title
this.faculty = scholarship.faculty
this.amount = scholarship.dollarAmount
this.description = scholarship.description
this.editScholarship(scholarship)
}
}
}
</script>
<style>
.scroll {
overflow-y: auto;
}
</style>
This is intended behavior. If the dialog box is not removed from the DOM when closed, its previous state will be retained unless otherwise modified.
You can choose one between three approaches I can think of in hindsight, 2 of which are what you are looking for.
Destroy the modal when not in use and re-instantiate when opening. A simple v-if toggling a boolean would do the trick, or a this.$destroy if your dialog box is a separate vue instance.
Add this.$el.scrollTop = 0 on your submit or cancel events. (A*)
Add scrollWrapper.scrollTop = 0 on your open dialog box method. (B*)
A: this.$el on item number 2 will only work if you are scrolling in the $el element, otherwise, you can access the target element using this.$el.querySelector('.scroll-wrapper')
B: Same as item number 2, but this uses vanilla JS references instead of relying on Vue, you should refer to your actual scroll wrapper.
Please add this code to the event to enable in your dialog.
this.$refs.editForm.$el.scrollIntoView({behavior: 'smooth'})
I am trying to unsuccessfully duplicate form items
Hello everyone.
I have a form and I need a button to duplicate fields every time the user clicks.
My form:
<v-layout v-for="(phone, index) in people.phones" :key="index" row
wrap>
<v-flex md7>
<v-text-field v-model="phone.number" label="Phone number*" required>
</v-text-field>
</v-flex>
<v-flex md5 class="pl-3">
<v-select v-model="phone.type" :rules="phone.tipoRules" required
:items="['WhatsApp', 'Commercial', 'Home']" label="Phone type*">
</v-select>
</v-flex>
</v-layout>
You just have to add an button to your template and define a #click function for it, which adds a new item to your people.phones array.
Template:
<button #click="addNumber">
add number
</button>
Vue:
methods: {
addNumber: function(){
this.people.phones.push({number: "", type: ""});
}
}
Simplified example: http://jsfiddle.net/wpako31u/