i have a two-way binding object with a group of inputs
<v-text-field
label="Workers"
v-model="myObject.workers">
</v-text-field>
myObject: any = {
workers: 2,
hours: 16,
nights: 2,
}
which will be used for my data-table items
private myHeaders: any = [
{
text: 'Pos.',
value: 'pos',
},
{
text: 'Description',
value: 'descr',
},
{
text: 'Workers',
value: 'workers',
},
{
text: 'Hours',
value: 'hours',
}
]
private myItems: any = [
{
descr: 'someName',
workers: this.montageService.method_1(this.myObject),
hours: this.montageService.method_2(this.myObject),
},
{
descr: 'anotherName',
workers: this.montageService.method_3(this.myObject),
hours: this.montageService.method_4(this.myObject),
}]
The Object this.myObject is updating but the table is not. the methods will not be triggered in myItems.
here is the data-table:
<v-data-table
:headers="myHeaders"
:items="myItems"
>
<template v-slot:item.pos="{item, index}">
{{ index }}
</template>
<template v-slot:item.descr="{item}">
{{ item.descr }}
</template>
<template v-slot:item.workers="{item}">
{{ item.workers }}
</template>
<template v-slot:item.hours="{item}">
{{ item.hours | toCurrency}}
</template>
</v-data-table>
I used a v-simple-table before, but to make the rows/values editable i think i needed to change to v-data-table. When i implement the functions in the data-table, its working with updated two-way binding object. But since there are different methods for each row to be used, i moved the functions to myItems
Related
How can I use chips in a Vue Text Field? The functionality I'm trying to replicate is kinda similar to the StackOverflow's Tag field. However I do not want auto-complete nor a dropdown list. Just a simple text field that displays chips for the items.
I have this
however im trying to get this
component.vue
<v-combobox
v-model="item.tokens"
chips
clearable
multiple
filled
rounded
>
<template v-slot:selection="{ attrs, item, select, selected }">
<v-chip
small
v-bind="attrs"
:input-value="selected"
close
#click="select"
#click:close="remove(item)"
>
{{ item }}
</v-chip>
</template>
</v-combobox>
<script>
export default {
data() {
return {
items: [
{
name: "Apples",
tokens: [
"_apple",
"_a",
],
backgroundColor: "#000000",
backgroundEnabled: false
},
{
name: "Oranges",
tokens: ["_orange", "_o"],
backgroundColor: "#000000",
backgroundEnabled: false
},
{
name: "Grapes",
tokens: ["_grape", "_g", "_grapes"],
backgroundColor: "#000000",
backgroundEnabled: false
}
]
};
},
};
</script>
Add the props append-icon="" in your v-combobox.
You will have something like this :
<v-combobox
v-model="item.tokens"
chips
clearable
multiple
filled
rounded
append-icon=""
>
<template v-slot:selection="{ attrs, item, select, selected }">
<v-chip
small
v-bind="attrs"
:input-value="selected"
close
#click="select"
#click:close="remove(item)"
>
{{ item }}
</v-chip>
</template>
</v-combobox>
I am using vuetify's to display dropdowns.
The options come from my components data.
What I would like to do now is to deactivate only some of the items in the v-select. What items are deactivated and which are activated will later on depend on the user input.
I can only find the option to deactivate the whole v-select like by adding disabled="true" to the v-select.
My code looks like this right now:
<v-row
v-for="(part, index) in xy"
:key="index">
<v-col md="3" sm="3">
<v-card ripple >
<v-img
src="src/assets/test.PNG"
></v-img>
</v-card>
</v-col>
<v-col md="8" sm="3">
<v-select
v- model="dropdownValues[index]"
:items="part"
hide-details
label="Select value"
single-line
#change="changeInput(index, dropdownValues[index])"
#click:append-outer="resetInput(index)"
>
<template slot="append-outer">
<v-icon #click="resetInput(index)">
mdi-close
</v-icon>
</template>
<template
slot="{item, index}">
{{ index }}
</template>
</v-select>
</v-col>
</v-row>
I thought that I could do the items via this slot possibility but now I am unsure where and how to add the functionality of changing which items are deactive and which not.
Thanks in advance!
<v-select> items array with objects can have an additional property disabled that currently is not documented.
data: () => ({
items: [
{ text: 'Empty', value: '' },
{ text: 'Test1', value: 'test1', disabled: true },
{ text: 'Test2', value: 'test2' },
{ text: 'Test3', value: 'test3' },
{ text: 'Test4', value: 'test4' },
]
}),
You can return the filtered array of objects as computed property you can see some demo example in here:
https://codepen.io/edenkindil/pen/RwrZMXy
BTW you can change this property key like to the text and value with the item-disabled just like you would use the item-text or item-value
Update: Vuetify docs is now updated
You can see now all the available items in array of objects:
{
text: string | number | object
value: string | number | object
disabled: boolean
divider: boolean
header: string
}
I have a Vuetify(v. 1.9.0) v-combobox with validation that at least one item should be selected from the menu. For some reason the validation is not triggered and there are no errors in the console.
<v-combobox
multiple
item-text="name"
item-value="id"
:items="items"
:rules="[rules.required]"
></v-combobox>
<script>
export default {
data: () => ({
rules: {
required: value =>
!!value || "Required."
}
})
}
</script>
What am I missing?
Try this example:
<template>
<v-app>
<v-content>
<v-form ref="form">
<div>
<v-combobox
multiple
item-text="name"
item-value="id"
:items="items"
:rules="[required]"
v-model="selected"
/>
selected = {{ selected }}
</div>
<div>
<v-btn #click="$refs.form.validate()">Validate</v-btn>
</div>
</v-form>
</v-content>
</v-app>
</template>
<script>
export default {
name: 'app',
data: () => ({
selected: null,
items: [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' },
],
}),
methods: {
required(value) {
if (value instanceof Array && value.length == 0) {
return 'Required.';
}
return !!value || 'Required.';
},
},
};
</script>
I upgraded to Vuetify 2 from 1.5. Everything went pretty smoothly except for one thing. I have a parent component with a v-data-table and I want to pass data and expand each row with a child component.
ScanGrid(parent component):
<template>
<v-container>
<v-card>
<v-card-text>
<v-layout row align-center>
<v-data-table
:headers="headers"
:items="items"
:hide-default-footer="true"
item-key="id"
>
<template slot="items" slot-scope="props">
<tr #click="props.expanded = !props.expanded">
<td>{{ props.item.name }}</td>
<td class="text-xs-left large-column">
{{ props.item.scanned }}
</td>
<td class="text-xs-left large-column">
{{ props.item.incoming }}
</td>
<td class="text-xs-left large-column">
{{ props.item.outgoing }}
</td>
<td class="text-xs-left large-column">
{{ props.item.unknown }}
</td>
</tr>
</template>
<template slot="expand" slot-scope="props">
<ScanGridChild :value="props.item"></ScanGridChild>
</template>
</v-data-table>
</v-layout>
</v-card-text>
</v-card>
</v-container>
</template>
ScanGridChild(child component):
<template>
<v-card>
<v-card-text>{{ value }}</v-card-text>
</v-card>
</template>
<script>
export default {
name: "ScanGridChildComponent",
props: {
value: {
Type: Object,
Required: true
}
},
computed: {},
watch: {
props: function(newVal, oldVal) {
console.log("Prop changed: ", newVal, " | was: ", oldVal);
this.render();
}
}
};
</script>
<style></style>
It worked fine in Vuetify 1.5.19. I'm on Vuetify 2.1.6 and using single file components. Thanks.
Vuetify 2.x has major changes to many components, slot-scopes are replaced with v-slot, and many new properties and slots added to vuetify data table
Here is the working codepen reproduced the same feature with above code
https://codepen.io/chansv/pen/BaaWbKR?editors=1010
You need to make sure that you have vue js 2.x and vuetify 2.x
Parent component code:
<template>
<v-container>
<v-card>
<v-card-text>
<v-layout row align-center>
<v-data-table
:headers="headers"
:items="items"
item-key="name"
single-expand
:expanded="expanded"
hide-default-footer
#click:row="clickedRow"
>
<template v-slot:expanded-item="{ item }">
<td :colspan="headers.length">
<ScanGridChild :value="item"></ScanGridChild>
</td>
</template>
</v-data-table>
</v-layout>
</v-card-text>
</v-card>
</v-container>
</template>
<script>
export default {
...
data () {
return {
expanded: [],
headers: [
{
text: "Localisation",
sortable: true,
value: "name"
},
{
text: "Paquets scannés",
sortable: true,
value: "scanned"
},
{
text: "Paquets entrants",
sortable: true,
value: "incoming"
},
{
text: "Paquets sortants",
sortable: true,
value: "outgoing"
},
{
text: "Paquets inconnus",
sortable: true,
value: "unknown"
}
],
items: [
{
id: 1,
name: "Location 1",
scanned: 159,
incoming: 6,
outgoing: 24,
unknown: 4,
test: "Test 1"
},
{
id: 2,
name: "Location 2",
scanned: 45,
incoming: 6,
outgoing: 24,
unknown: 4,
test: "Test 2"
}
],
}
},
methods: {
clickedRow(value) {
if (this.expanded.length && this.expanded[0].id == value.id) {
this.expanded = [];
} else {
this.expanded = [];
this.expanded.push(value);
}
}
}
...
}
</script>
In child component
Replace
props: {
value: {
Type: Object,
Required: true
}
},
with( Type and Required change to lower case type and required)
props: {
value: {
type: Object,
required: true
}
},
I have a vue component which calls a load method returning a multi-part json object. The template of this vue is made up of several sub-vue components where I assign :data="some_object".
This works in all templates except for the one with a v-data-table in that the v-for process (or the building/rendering of the v-data-table) seems to kick-in before the "data" property is loaded.
With an npm dev server if I make a subtle change to the project which triggers a refresh the data-table then loads the data as I expect.
Tried various events to try and assign a local property to the one passed in via "props[]". Interestingly if I do a dummy v-for to iterate through or simply access the data[...] property the subsequent v-data-table loads. But I need to bind in other rules based on columns in the same row and that doesn't work.
Parent/main vue component:
...
<v-flex xs6 class="my-2">
<ShipViaForm :data="freight"></ShipViaForm>
</v-flex>
<OrderHeaderForm :data="orderheader"></OrderHeaderForm>
<v-flex xs12>
<DetailsForm :data="orderdet" :onSubmit="submit"></DetailsForm>
</v-flex>
...
So in the above the :data property is assigned from the result below for each sub component.
...
methods: {
load(id) {
API.getPickingDetails(id).then((result) => {
this.picking = result.picking;
this.freight = this.picking.freight;
this.orderheader = this.picking.orderheader;
this.orderdet = this.picking.orderdet;
});
},
...
DetailsForm.vue
<template lang="html">
<v-card>
<v-card-title>
<!-- the next div is a dummy one to force the 'data' property to load before v-data-table -->
<div v-show="false">
<div class="hide" v-for='header in headers' v-bind:key='header.product_code'>
{{ data[0][header.value] }}
</div>
</div>
<v-data-table
:headers='headers'
:items='data'
disable-initial-sort
hide-actions
>
<template slot='items' slot-scope='props'>
<td v-for='header in headers' v-bind:key='header.product_code'>
<v-text-field v-if="header.input"
label=""
v-bind:type="header.type"
v-bind:max="props.item[header.max]"
v-model="props.item[header.value]">
</v-text-field>
<span v-else>{{ props.item[header.value] }}</span>
</td>
</template>
</v-data-table>
</v-card-title>
</v-card>
</template>
<script>
import API from '#/lib/API';
export default {
props: ['data'],
data() {
return {
valid: false,
order_id: '',
headers: [
{ text: 'Order Qty', value: 'ord_qty', input: false },
{ text: 'B/O Qty', value: 'bo_qty', input: false },
{ text: 'EDP Code', value: 'product_code', input: false },
{ text: 'Description', value: 'product_desc', input: false },
{ text: 'Location', value: 'location', input: false },
{ text: 'Pick Qty', value: 'pick_qty', input: true, type: 'number', max: ['ord_qty'] },
{ text: 'UM', value: 'unit_measure', input: false },
{ text: 'Net Price', value: 'net_price', input: false },
],
};
},
mounted() {
const { id } = this.$route.params;
this.order_id = id;
},
methods: {
submit() {
if (this.valid) {
API.updateOrder(this.order_id, this.data).then((result) => {
console.log(result);
this.$router.push({
name: 'Orders',
});
});
}
},
clear() {
this.$refs.form.reset();
},
},
};
</script>
Hopefully this will help someone else who can't see the forest for the trees...
When I declared the data() { ... } properties in the parent form I initialised orderdet as {} instead of [].