Develop Reference

How to clear values inside modal form in vue

I have a modal with a small form (Select and list with multiple select). I can save my values. But after saving I want to close the modal and while closing clear every form field in this case my list selection and selectbox values, right now they are still the first value I selected before closing. Could someone give me a pointer on how to do it?
I thought of putting everything inside a form tag and maybe trying to achieve it from their, but do not know if it is a correct way. these are the selections I want to clear. The binded arrays I can already clear out. But not the select in the list
html:
<v-row>
<v-col cols="4" >
<v-select
:items="availableTimes"
item-text="date"
#select="filterByDate"
v-model="selectedDate"
></v-select>
</v-col>
<v-col cols="8">
<v-chip-group
v-model="selection"
active-class="deep-purple--text text--accent-4">
<v-chip
v-for="(time, i) in dateTimeArray"
:key="time.id"
:value="time"
v-on:click="getTimeValue(times)"
#click="getTimesFiltered(time)">
{{ time.startTime +" - "+ time.endTime }}
</v-chip>
</v-chip-group>
</v-col>
</v-row>
<v-row>
<v-col cols="4">
<v-card>
<v-list>
<v-list-item-group
v-model="model"
multiple
color="blue"
>
<v-list-item
v-for="(item, i) in voterArrayFilteredByTime"
:key="item.id"
:value="item">
<v-list-item-content>
<v-list-item-title v-text="item.voterUniqueName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>

It would be helpful if you show your script tags.
Without seeing what you are trying to do, my suggestion would be to use reset your "selection" variable in your methods. For example if you have a close button
<v-btn #click="resetStuff" >Close me<v-btn>
Then in your method:
methods: {
// your method
resetStuff() {
this.selection = null
//.. some more variables to reset
}

Change in one field is reflected in others with same key in Vuejs multidimentional form

I have a multidimentional form in vuejs with fields for each language.
<v-tab-item v-for="language in languages" :key="language">
<v-row>
<v-col cols="4">
<v-text-field
label="Title"
v-model="title[language]"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="6">
<v-textarea
label="Description"
v-model="description[language]"
></v-textarea>
</v-col>
</v-row>
</v-tab-item>
This is languages array
languages: ['first-language', 'second-language', 'third-language']
Now when i add any text in title field with keyboard same text gets added in description field also.. is there any other way to define v-model for multidimentional form?

How customizable is vuetify data tables?

I am trying to achieve the above result. I have already have the table working in my vue project.
This piece of code is the template for the datatable from Vuetify.
<v-card>
<v-card-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="tableData"
:search="search"
></v-data-table>
</v-card>
Populating the table with basic data is just fine and I've already done that, but I need add that "Send again" link/button, and hook it up with a method. Or any other customization for that matter, like the yellow bullet point. Is this going to be super hard to do ?

To do this, we can use item or item.<name> Slots, you can read more about it in data table API https://vuetifyjs.com/en/api/v-data-table/#slots
your code can be something like this:
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:item.status="{ item }">
<template v-if="item.status == `registered`">
{{ item.status }}
</template>
<template v-else>
{{ item.status }} - <v-btn #click="AddSendBtnMethod(item.id)"> send again<v-btn>
</template>
</template>
</v-data-table>
Here is a sample from Vuetify, changed to show how its works

How do I open and close multiple v-menus in my VueJS / Vuetify component?

I create multiple popover menus with v-menu; one for each row in my table. I need a way for the menu to close when I click submit. I cannot use v-model="menu" and make menu false or true to hide or show the menu because then every menu will open when I set it to true! Does anyone know another way to make the menu close, without using v-model? I have found a way to open it using the activator slot. Perhaps there is an activator slot that will close the component, as well?
<template v-slot:item.hours="{ item }">
<v-menu
:nudge-width="200"
:close-on-content-click="false"
offset-x
>
<template v-slot:activator="{ on }">
<v-chip
color="blue"
dark
v-on="on"
>
{{ parseFloat(item.hours).toFixed(1) }}
</v-chip>
</template>
<v-form #submit.prevent="handleSubmitMenu(item)">
<v-card class="px-5">
<v-text-field
label="Edit Hours"
:value="item.hours"
#input="updateHours"
></v-text-field>
<v-card-actions>
<SubmitButton />
</v-card-actions>
</v-card>
</v-form>
</v-menu>
</template>
handleSubmitMenu(timeEntry) {
const hours = this.hours
this.menu = false
},

Just add v-model for each row.
<v-menu v-model="item.menu">
EDIT you also can use $refs just add it to v-menu and call save() to close it.
<v-menu ref="menu" top offset-y :close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-btn
color="primary"
dark
v-on="on"
>
Activator
</v-btn>
</template>
<v-btn #click="$refs.menu.save()"></v-btn>
</v-menu>

Vuetify.js: how to place button actions in v-card on left and right?

In v-card-actions component of v-card, I want to place one button on the left and the other on the right using mr-0 (margin-right= 0), but the 2 buttons always stay close to each other.
What I tried:
Prop left and right for the buttons
v-spacer component between the buttons
Code:
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Ttile</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South </div>
</div>
</v-card-title>
<v-card-actions>
<v-btn left>Share</v-btn>
<v-spacer />
<v-btn right>Explore</v-btn>
</v-card-actions>
</v-card>
Codepen.
How to solve this?

Your code is correct. Just use this:
<v-card-actions>
<v-btn>Share</v-btn>
<v-spacer></v-spacer>
<v-btn>Explore</v-btn>
</v-card-actions>
So just change the v-spacer to not be self-enclosing tag.

Just wrap them in v-flex and add text-xs-right class to the second, to pull to the right the second button.
<v-card-actions>
<v-flex>
<v-btn>Share</v-btn>
</v-flex>
<v-flex class="text-xs-right">
<v-btn>Explore</v-btn>
</v-flex>
</v-card-actions>
CodePen
Edit Vuetify 2.1.0 (thanks to #J. Unkrass) :
Just wrap them in v-col and add text-right class to the second, to pull to the right the second button.
<v-card-actions>
<v-col>
<v-btn>Share</v-btn>
</v-col>
<v-col class="text-right">
<v-btn>Explore</v-btn>
</v-col>
</v-card-actions>