How are you all using Vuelidate with v-for. I can't seem to get it to work correctly. It either validates each of the text-fields in my form, or it throws an error. I only want it to validate the field that is being entered, and not other fields that are created from v-for.
In the below template you can see the creds in amazonCredsArray are props passed in from the parent component. Depending on the number of hashes in the amazonCredsArray is the number of forms that are created. With the below setup, the text-field below is created multiple times, and Vuelidate validates ALL these fields when just 1 is entered. I have :key defined on the field but it doesn't help.
Template
<template>
<v-container fluid grid-list-lg class="come_closer">
<v-layout row wrap>
<v-flex xs12 v-for="creds in amazonCredsArray" :key="creds.id" class="pb-4">
<v-card class="lightpurple">
<v-card-title>
<v-icon class="my_dark_purple_text">language</v-icon>
<h1 class="title oswald my_dark_purple_text pl-2 pr-5">ENTER YOUR AMAZON CREDENTIALS BELOW</h1>
</v-card-title>
<v-form>
<v-layout xs12 row wrap class="mx-auto" >
<v-flex xs12>
<v-text-field
:error-messages="sellerIdErrors"
required
:key="creds.seller_id"
color="indigo"
label="Amazon Seller Id"
v-model="creds.seller_id"
prepend-icon="person"
#input="$v.seller_id.$touch()"
#blur="$v.seller_id.$touch()"
></v-text-field>
</v-flex>
And my offending script:
Script
import { validationMixin } from 'vuelidate';
import { required } from 'vuelidate/lib/validators';
var url = "https://bc-only-rates-trimakas.c9users.io";
export default {
mixins: [validationMixin],
validations: {
seller_id: { required }
},
props: ["amazonCredsArray"],
computed:{
sellerIdErrors () {
const errors = []
if (!this.$v.seller_id.$dirty) return errors
!this.$v.seller_id.checked && errors.push('Please provide us your seller id')
return errors
},
},
Related
In console I see following messages:
Property or method Id is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
How to get rid of it?
<template>
<v-content>
<v-container grid-list-md text-xs-center>
<v-layout v-for="person in people" :key="person.Id" row wrap>
<v-flex :key="Id" sm1 hidden-xs-only>
<v-card-text class="px-0">{{ person.Id }}</v-card-text>
</v-flex>
</v-layout>
</v-container>
</v-content>
<template>
<script>
export default {
data: function() {
return {
people: null
}
},
mounted() {
axiosInstance.get("person").then(response => {
this.people = response.data.persons;
});
}
}
</script>
<v-flex :key="Id" sm1 hidden-xs-only>
:key is another syntax for v-bind:key, which is supposed to contain javascript code. In your case, Id is not defined. You probably wanted to use 'Id' string literal.
Use either
<v-flex :key="'Id'" sm1 hidden-xs-only>
or
<v-flex key="Id" sm1 hidden-xs-only>
or define an Id data in your vue instance.
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/
I'm passing a object as a prop to a child component but I can't reference one of its elements (user_id) to use in a method in that child component.
My code (slightly abbreviated) is:
<template>
<div class="back">
<v-app id="inspire">
<v-content>
<v-container fluid>
<v-card flat>
<v-card-title>
<div>
<div class="headline">
{{data.title}}
</div>
<span class="grey--text">{{data.user}} said {{data.created_at}}</span>
</div>
<v-spacer></v-spacer>
<v-badge color="deep-orange accent-3" left overlap>
<span slot="badge">7</span>
<v-icon color="grey lighten-1" large>
insert_comment
</v-icon>
</v-badge>
<!--<v-btn color="deep-orange accent-3">5 replies</v-btn>-->
</v-card-title>
<v-card-text v-html="data.body"></v-card-text>
<v-card-actions v-if="own">
<v-btn icon small>
<v-icon color="deep-orange accent-3">edit</v-icon>
</v-btn>
<v-btn icon small>
<v-icon color="red">delete</v-icon>
</v-btn>
</v-card-actions>
</v-card>
<return-button></return-button>
</v-container>
</v-content>
</v-app>
</div>
</template>
<script>
export default {
name: "ShowQuestion",
props: ['data'],
data() {
return {
own: this.Own(),
}
},
methods: {
Own: function () {
return this.UserID() == this.user_id <---HERE BE DRAGONS! (reported as 'undefined')
},
UserID: function () {
... returns the 'sub' from the JWT token
return sub;
}
},
}
</script>
While the correct information is being displayed in the template, I also need to be able to compare the user's ID from the token with that contained in the prop (i.e. data.user_id). My reading suggests the solution will involve converting the object to an array, but that's beyond my current skill level too. I'd appreciate some pointers to a solution.
Thanks,
Tom
If you can render data.user_id in your template you can use it anywhere, but I'd probably do something like this to solve your problem:
props: ['data']
data() {
return {
}
},
computed: {
UserId() {
return //however you get your id
}
},
Then your v-if could just be this:
<v-card-actions v-if="UserId === data.user_id">
I am not able to pass data to my custom component, my component uses vuetify, currently I dont get any message:
MY component:
<template>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-img
src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
aspect-ratio="2.75"
></v-img>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ tenantName }}</h3>
<div>{{ tenantDescription }}</div>
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
data () {
return {
// ...
}
},
props: ['tenantImage', 'tenantName', 'tenantDescription']
}
</script>
And this is how I call in my view:
<tenant-card
imgSrc="https://fuckoffgoogle.de/wp-content/uploads/2017/12/cropped-logo_midres-1.png"
:tenantName="my Name is"
:tenantDescription="this is a description"
></tenant-card>
The component is registered I see it on my view just without any data.
I get this outside in the page source
<div class="layout" tenantimage="https://fuckoffgoogle.de/wp-content/uploads/2017/12/cropped-logo_midres-1.png" tenantname="my Name is" tenantdescription="this is a description">
...
The names of your properties are wrong:
<tenant-card
tenant-image="'https://fuckoffgoogle.de/wp-content/uploads/2017/12/cropped-logo_midres-1.png'"
:tenant-name="'my Name is'"
:tenant-description="'this is a description'">
</tenant-card>
HTML attribute names are case-insensitive. Any uppercase character will be interpreted as lowercase. So camelCased prop names need to use their kebab-cased equivalents.
Edit:
And as already mentioned by #Sergeon you have to add the extra '' to pass an string as a property value
I have a main component that is used to display items using a loop:
<v-list-tile v-for="(item, index) in items" :key="item.title">
...
<report type="item.type"> </report>
</v-list>
The report component is used to report abuse on the system, and report type may vary depending on the item from the parent loop.
As users are very unlikely to use report on a regular basis I would like to only load v-select elements when the Dialog (modal) is opened.
Using created or mounted triggers the loading method everytime the report component is generated and not when the report component is opened.
Is there a smart way to prevent this and only have the loading method within report being triggered only when the component is opened.
=== Report.vue file ===
=== This file is loaded in the parent component
<template lang="html">
<v-dialog v-model="dialog" persistent max-width="800px" lazy>
<v-btn icon slot="activator">
<v-icon>error_outline</v-icon>
</v-btn>
<v-card>
<v-card-title>
<div class="headline"><v-icon large>error_outline</v-icon> Reporting</div>
</v-card-title>
<v-card-text>You are about to report the following {{ reportType }}: "<i>{{ reportContent.title }}</i>"
<v-container v-if="this.$store.getters['report/getLoadedState']" grid-list-md >
<v-layout wrap>
<v-flex xs12 sm12>
<v-select
label="Select a reason"
required
cache-items
:items="items"
item-text="title"
item-value="id"
></v-select>
</v-flex>
<v-flex xs12 sm12>
<v-text-field
label="Please provide additional information here"
multi-line></v-text-field>
</v-flex>
</v-layout>
</v-container>
<v-container v-else grid-list-md>
<v-layout>
<v-flex xs12 sm12>
Loading
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" #click.native="cancel">Cancel</v-btn>
<v-btn color="green darken-1" flat="flat" #click.native="report">Report</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'report',
data () {
return {
dialog: false,
items: this.$store.getters['report/getItems']
}
},
props: ['reportType', 'reportContent'],
methods: {
cancel () {
this.dialog = false
},
report () {
this.dialog = false
},
loadReasons (type) {
if (!this.$store.getters['report/getLoadedState']) {
this.$store.dispatch('report/setItems', type)
}
}
}
}
</script>
<style lang="css" scoped>
</style>
PS 1: I'm not using JQuery and do not intend to use it
PS 2: Calling the method outside of the report component is not an option as I want to maximize reusability of this compenent and only pass arguments to it using props
How I have done this in the past is to use a "dynamic component." Vue uses a special syntax for dynamic components <component v-bind:is="currentView"></component> see: Vue dynamic components
You can set the "currentView" property to null and then on a button click another event set the currentView to report. Doing it this way will allow you to use the mounted method as the component is not rendered or created until it is dynamically called.
<component :is="myComponent"></component>
<v-btn #click="loadComponent">Show Report</v-btn>
then...
data:{
myComponent: null;
},
methods: {
loadComponent: function(){
this.myComponent = 'report';
}
}
P.S. You can of course use this method to render any other components in the same place. i.e. you can set the 'currentView' to the name of any available component and it will be instantly rendered in its place.
I ended up using a watch on the boolean managing the dialog...
Make a function which loads the v-select. Don't initialize it just create it. Now whenever user clicks the report model you can initialize multiple functions using v-on:click or #click.
For example :
<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div>
This solution can also be found on :
Stackoverflow Link