So in my vue I have a method that takes some data, creates arrays and passes them to another vue file for rendering in the template.
The method
this.shoesData.titles = ['Date', 'Model', 'Price Qty', 'Order Qty', 'Discount Qty'];
this.shoesData.values = [
new Date(this.getShoes.insertDate).toISOString().slice(0, 10).toString(),
this.getShoes.model,
parseFloat(this.getShoes.price).toFixed(0).toString()+' tn',
parseFloat(this.getShoes.order).toFixed(0).toString()+' tn',
parseFloat(this.getShoes.discount).toFixed(0).toString()+' tn'
];
and then I pass shoesData to another file to use it in its template
<CardMultiValue v-if="shoesData.values" :cardData="shoesData" />
in CardMultiValue I have,
<template>
<v-card style="width:100%;height:100%;" :flat="flat" >
<v-card-title class="title" v-if="cardData.Title" style="width:100%;height:30px;justify-content:center;align-items:center;padding:5px;">{{cardData.Title}}</v-card-title>
<v-card-actions v-if="cardData.Title" style='width:100%;height:calc(100% - 30px);padding:5px;' >
<v-container style="padding:0px;height:100%;">
<v-row style="height:100%;">
<v-col :cols="8">
<div v-for="title in cardData.titles" :key="title" :style="'display:flex;align-items:center;font-size:18px;font-weight:bold;height:'+rowHeight+'%;'">
{{title}}
</div>
</v-col>
<v-col :cols="4">
<div v-for="value in cardData.values" :key="value" :style="'display:flex;align-items:center;font-size:18px;height:'+rowHeight+'%;'">
{{value}}
</div>
</v-col>
</v-row>
</v-container>
</v-card-actions>
<v-card-actions v-else style='width:100%;height:100%;padding:5px;' >
<v-container style="padding:0px;height:100%;">
<v-row style="height:100%;">
<v-col :cols="8">
<div v-for="a in cardData.titles" :key="a" :style="'display:flex;align-items:center;font-size:18px;font-weight:bold;height:'+rowHeight+'%;'">
{{a}}
</div>
</v-col>
<v-col :cols="4">
<div v-for="b in cardData.values" :key="b" :style="'display:flex;align-items:center;font-size:18px;height:'+rowHeight+'%;'">
{{b}}
</div>
</v-col>
</v-row>
</v-container>
</v-card-actions>
</v-card>
This is not something complicated, and yet, if this.getShoes.order and this.getShoes.discount both happen to be 0 , I get
TypeError: Cannot read property 'key' of undefined
at sameVnode (vue.runtime.esm.js?2b0e:5811)
at updateChildren (vue.runtime.esm.js?2b0e:6213)
at patchVnode (vue.runtime.esm.js?2b0e:6313)
at updateChildren (vue.runtime.esm.js?2b0e:6187)
at patchVnode (vue.runtime.esm.js?2b0e:6313)
at updateChildren (vue.runtime.esm.js?2b0e:6187)
at patchVnode (vue.runtime.esm.js?2b0e:6313)
at updateChildren (vue.runtime.esm.js?2b0e:6187)
at patchVnode (vue.runtime.esm.js?2b0e:6313)
at updateChildren (vue.runtime.esm.js?2b0e:6187)
This must be a template error, because if I completely remove this.getShoes.order or this.getShoes.discount I get no error. Also, if I dont pass the data to CardMultiValue I get no error.
How can I fix this? Thanks
this.getshoes sounds like a method name. So, perhaps change it to this.getShoes().price or pass the appropriate paramters, if there are any, to it; this.getShoes(someParameter).price
Related
I'm trying to figure out why the V-Dialog wont popout and when im trying to click the button, the v-dialog should pop out but it didnt, and this is the error i got
[object Error]:
{description: "'ShadowRoot' is not defined",
message: "'ShadowRoot' is not defined",
number: -2146823279,
stack: "ReferenceError: 'ShadowRoot' is not defined at
handleShadow (eval code:33314:3) at
inserted (eval code:33334:5) at
callHook$1 (eval code:6714:7) at
callInsert (eval code:6653:9) at
wrappedHook (eval code:2243:5) at
invokeWithErrorHandling (eval code:1862:5) at
invoker (eval code:2183:9) at
invokeInsertHook (eval code:6380:9) at
patch (eval code:6599:5) at
Vue.prototype._update (eval code:3957:7)"}
and here are the code :
html
<div>
<v-data-table
:headers="headers"
:items="data"
class="elevation-1"
hide-default-footer
>
<template v-slot:[`item.action`]="{ item }">
<v-btn depressed #click="view(item.book_id)" color="primary">View</v-btn>
</template>
</v-data-table>
<v-text-field v-model="ItemPerPage" label="Items Per Page" #change="GettingDataPerItem">
</v-text-field>
</div>
<v-dialog v-model="dialog" max-width="800px">
<v-card>
<v-card-title>
<span class="subtitle-1 font-weight-bold">Details Of Book</span>
</v-card-title>
<v-form lazy-validation>
<v-col cols="12" align-self="center">
<v-layout wrap justify-center>
<v-flex d-flex lg5 sm5 xs12>
<v-text-field v-model="book_id" :readonly="true" class="allText" label="Book ID"/>
</v-flex>
<v-divider class="mx-4" vertical/>
</v-layout>
</v-col>
<v-card-actions>
<v-layout v-if="IsActive === 0" justify-end class="ma-4">
<div>
<v-btn #click="dialog = false" style="width:150px;margin-left:10px" color="#263238" class="white--text">Close</v-btn>
</div>
</v-layout>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
When i read the code like over 20 times, it looks fine with me, and read the script over and over and nothing wrong to me
script
export default {
data() {
return {
dialog: false,
//censored_code
};
},
view(emp_no) {
this.$axios
.$post(`some/api/.......`, {
book_id: book_id,
})
.then((res) => {
//result of the respond data
this.dialog = true
});
},
},
This ShadowRoot annoyed me, how to fix this? should upgrade something?
Make sure your <v-data-table> and <v-dialog> elements are contained within a single root:
<template>
**<something>**
<div><v-data-table></v-data-table></div>
<v-dialog/>
**</something>**
</template>
Finally solve the problem, i'm using microsoft edge and then switch to firefox and the v-dialog poped out
I have some problem with vee-validate, vuetify and v-for.
There is my code :
<ValidationProvider
name="availableLanguages"
rules="required"
v-slot="{ errors }"
>
<v-row>
<v-col
cols="2"
v-for="availableLanguage in availableLanguages"
:key="availableLanguage.label"
>
<v-checkbox
v-model="selectedLanguage"
:label="availableLanguage.label"
:value="availableLanguage.value"
:error="errors.length > 0"
hide-details
#click="setDefaultLanguage"
key="availableLanguage-input"
/>
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
class="errorCheckBox"
>
{{ errors[0] }}
</v-col>
</v-row>
</ValidationProvider>
What is the expected result ?
I have a checkbox group. I want if all checkboxes are unchecked then an error message appear.
What's happened ?
If i don't click once on the first iteration of the v-for loop, the error is not trigger.
Thanks for help.
By default, the Validationprovider doesn't validate as soon as form is rendered, but only does it when the field has been touched. You can use immediate prop to make the field be validated when rendered:
<ValidationProvider
name="availableLanguages"
rules="required"
immediate
v-slot="{ errors }"
>
What I want to do is display the image on the page. I have stored its path in backend(MySQL) and after fetching that I am putting it in src of <v-img> but the error occurs saying-
[Vuetify] Image load failed
src: userImage
found in
---> <VImg>
<Anonymous>
<VContent>
<VApp>
<App> at src/App.vue
<Root>
EDIT- this is my Profile.js file
<template>
<v-container >
<div class="headline">Your Profile</div>
<br><br>
<div class="title">Username-</div>
<v-text-field
v-model="user.username"
placeholder="Username"
required
></v-text-field>
<div class="title">Password-</div>
<v-text-field
v-model="user.password"
placeholder="Password"
required
></v-text-field>
<div class="title">Avatar-</div>
<v-img
v-bind:src="userImage"
aspect-ratio="1"
class="grey lighten-2"
max-width="150"
max-height="150"
></v-img>
<div class="title">Email-</div>
<v-text-field
v-model="user.email"
placeholder="Email"
required
></v-text-field>
</v-container>
</template>
Make sure to bind src attribute : <v-image v-bind:src="userImage" />
As you can see here and here, the message is generated as a result of onerror event raised by browser itself so this means something is wrong with the image URL (image with this URL is not on server). Check the URL rendered, try to copy it and open in browser...
I'm working on a CMS project and I have an issue I can't figure out.
I Have a component where I'm showing IP's. On change I want a badge to appear, so the user knows "this field is changed".
But the thing is the badge won't show if I'm using "v-slot:badge".
In the v-if is a computed property, If I inspect the page with vue devtools ‘isStartIpValueChanged’ will be true on a change. So, it should work right?
Template
<v-list-item-content>
<v-form ref="form" v-model="valid">
<v-hover v-slot:default="{ hover }">
<v-row align-content="center" no-gutters>
<v-col>
<v-badge overlap color="red" right>
<template v-slot:badge v-if="isStartIpValueChanged">
<v-avatar color="red" size="6"></v-avatar>
</template>
<v-text-field
dense
:rules="apiIpRules"
v-model="apiIp.startIp"
#input="valueChanged()"
ref="startIp"
:class="hover ? 'hover-text-color' : ''"
placeholder="###.###.###.###">
</v-text-field>
</v-badge>
</v-col>
<v-col cols="1" class="text-center" align-self="center">
<p>-</p>
</v-col>
<v-col cols="1" class="text-center" align-self="center">
<v-btn v-show="hover" #click="deleteIp()" icon small color="red"><v-icon>mdi-minus-circle</v-icon></v-btn>
</v-col>
</v-row>
</v-hover>
</v-form>
Created and Computed (apiIp is a prop I get from the parent component)
created () {
this.apiIpsOriginalValueStartIp = this.apiIp.startIp
this.apiIpsOriginalValueEndIp = this.apiIp.endIp
this.apiIp.uuid = this.GenerateUUID()
},
computed: {
isStartIpValueChanged () {
return this.apiIp &&
(this.apiIp.startIp !== this.apiIpsOriginalValueStartIp ||
this.apiIp.uuid === null)
},
isEndIpValueChanged () {
return this.apiIp &&
(this.apiIp.endIp !== this.apiIpsOriginalValueEndIp ||
this.apiIp.uuid === null)
}
},
Anyone know what is going wrong here?
As according to Vuetify's own documentation, you should be using the v-model, directly on the v-badge, to show it only when you want it to.
<v-badge overlap color="red" right v-model="isStartIpValueChanged">
<template v-slot:badge>
<v-avatar color="red" size="6"></v-avatar>
</template>
<v-text-field
dense
:rules="apiIpRules"
v-model="apiIp.startIp"
#input="valueChanged()"
ref="startIp"
:class="hover ? 'hover-text-color' : ''"
placeholder="###.###.###.###">
</v-text-field>
</v-badge>
Doc: https://vuetifyjs.com/en/components/badges#show-on-hover
I have inherited an existing app written in Vue/Vuetify and it has an existing v-textarea element that I am trying to modify. The issue is that we now want to pre-populate this element with sample text that the user can edit to their needs. I have tried adding value and placeholder properties to the v-textarea element and not gotten the sample text to show in the v-textarea.
Here is the dialog that contains the troublesome v-textarea:
<v-dialog v-model="dialogAddComment"
hide-overlay
persistent
max-width="600px">
<v-toolbar card color="blue-grey lighten-4" dense elevation="16">
<v-toolbar-title color='black' class="body-2 ml-3">Add Comment</v-toolbar-title>
<v-spacer></v-spacer>
<v-icon #click.stop="closeDialogAddComment">close</v-icon>
</v-toolbar>
<v-form ref="form" v-model="valid" lazy-validation>
<v-card>
<v-flex>
<v-layout column>
<v-flex xs12 sm6 d-flex mx-3>
<v-select
:items="engagement.allIncidentTypes"
item-text="incidentCategoryText"
item-value="incidentCategoryKey"
label="Category"
:rules="[v => !!v || 'Category is required']"
required
v-model="incident.incidentCategoryKey"
></v-select>
</v-flex>
<v-flex xs12 sm6 d-flex mx-3>
<v-select
:items="zeroTo8"
label="Impact (Hours)"
:rules="[v => (v === 0 || v <9) || 'Impact is required']"
required
v-model="incident.numberOfHours"
></v-select>
</v-flex>
<v-flex xs12 sm6 d-flex mx-3>
<v-textarea
name="input-7-1"
label="Comment"
:rules="[v => !!v || 'Comment is required']"
required
v-model="incident.incidentFreeText"
counter=1024
maxLength=1024
rows=3
value='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
></v-textarea>
<!-- -->
</v-flex>
</v-layout>
</v-flex>
<v-card-actions>
<v-spacer/>
<v-btn :disabled="!valid" color="primary" small #click="addIncident">Submit</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>
</v-form>
</v-dialog>
I have tried setting the placeholder and value properties and seen nothing. I initially tried setting a text property but then found the documentation on the vuetify.js site. They even have a simple example that does exactly what I want to do. But my implementation is not working. and I am stumpped!
You should not set both v-model and value at the same time.
One possible solution is removing v-model and update incident.incidentFreeText in #input event
<v-textarea
name="input-7-1"
label="Comment"
:rules="[v => !!v || 'Comment is required']"
required
counter=1024
maxLength=1024
rows=3
value='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
#input="onInput"
>
</v-textarea>
methods: {
onInput(value) {
this.incident.incidentFreeText = value
}
}
Another possible solution is keeping v-model, remove value, but you need to set
this.incident.incidentFreeText='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
somewhere in your code.