I'm trying to change the UI element from <v-card-text> to <v-text-field> read-only. While doing so, I face some challenges. This is used to work
{{ displayType(campaign.type_name) }}
but not they don't. I got error Errors compiling template:
<v-text-field
outlined
small
value="{{ displayType(campaign.type_name) }}"
label="Type"
readonly
></v-text-field>
Try this instead
<v-text-field
outlined
small
:value="displayType(campaign.type_name)"
label="Type"
readonly
></v-text-field>
Related
I have a vuetify datatable, the original solution is dynamic allocation of search text field using v-for for each of the column and then multi filter is implemented. following is my solution:
<template v-for="(header, i) in columns" v-slot:[`header.${header.value}`]="{ }">
{{ header.text }}
<v-text-field :key="i"
v-model="multiSearch[header.value]"
class="pa"
type="text"
:placeholder="header.value"
prepend-inner-icon="mdi-magnify"
></v-text-field>
</template>
The problem is whenever an user clicks on the text field of a particular column, the sorting function also runs at the same time. I have a miniature solution on the following pen which has the same behaviour. I tried to put one div after template tag but still the same. Kindly have a look at it. Any help would be appreciated.
Code Pen
Wrap the text field with a DIV and attach an empty handler to prevent the bubbling of CLICK events:
<template v-for="(header, i) in columns" v-slot:[`header.${header.value}`]="{ }">
{{ header.text }}
<div #click.stop>
<v-text-field :key="i"
v-model="multiSearch[header.value]"
class="pa"
type="text"
:placeholder="header.value"
prepend-inner-icon="mdi-magnify"
></v-text-field>
</div>
</template>
I have two inputs from which the first one is a switch and the second one is a text field which gets conditionally displayed if switch is set to true.
In situation when user sets the switch to true and then enters something in the text box the v model value for this input needs to be reset / removed when user sets the switch to false again.
I know I can achieve this manually or by using watcher. However just curious if I have missed something in the docs which will do this for me or may be a better method than what I think is the only way.
<v-row>
<v-col cols="12" sm="12">
<v-switch
v-model="data.budget_confirmed"
label="Budget Confirmed"
color="primary"
class="ma-0 pt-0"
hide-details
/>
</v-col>
<v-col v-if="data.budget_confirmed === true" cols="12" sm="12">
<validation-provider v-slot="{ errors }" name="Amount" rules="required">
<v-text-field
v-model="data.amount"
name="amount"
label="Amount"
:error-messages="errors"
:hide-details="!errors.length"
outlined
dense
/>
</validation-provider>
</v-col
</v-row>
Listen for the change event on the switch:
<v-switch
v-model="data.budget_confirmed"
label="Budget Confirmed"
color="primary"
class="ma-0 pt-0"
hide-details
#change="onSwitchToggle"
/>
Then in the onSwitchToggle method, reset amount when the switch if off:
onSwitchToggle () {
if (!this.budget_confirmed) {
this.amount = 0;
}
}
I wrote a component that is shared throughout my application, in some places I need the dragging/sorting and some do not want it there. I pass a prop to my component called disableDraggable and based on that it should disable, unfortunately it does not do anything, how can I disable the draggable?
I should note I tried both the options object syntax and also a simple :disable , here is the relevant code:
<draggable v-model="copyOfQuestions" #end="$emit('updateQuestionsOrder', copyOfQuestions)" :options="{disable : disableDraggable}">
// or :disable="disableDraggable"
<v-card flat class="list_outer_block" v-for="q in questions" :key="q.question_id">
<v-card-text class="pa-0">
<v-layout justify-start align-center>
<v-flex initial-xs px-2 py-3 class="handle minwdth-0" :title="$t('general.drag_for_reorder')">
<v-icon class="text--secondary text--lighten-3">$vuetify.icons.drag_indicator</v-icon>
</v-flex>
....
props: ['questions', 'disableDraggable'],
How can I disable the draggable functionality?
I should note that vue-draggable (what I am using) supposedly has the same api as SortableJs
It should be :disabled and NOT :disable.
<draggable v-model="copyOfQuestions" #end="$emit('updateQuestionsOrder', copyOfQuestions)" :options="{disabled : disableDraggable}">
Reference:
https://github.com/SortableJS/Vue.Draggable/blob/17bdd4b8b2ab4f4df45dd76edf1afec864ec0936/example/debug-components/slot-example.vue
I have the following Vuetify form with single v-text-field and a button:
<v-form v-model="valid" ref="form" #submit.prevent>
<v-container>
<v-layout>
<v-flex
xs12
md8
>
<v-text-field
v-model="name"
:rules="nameRules"
:counter="max"
maxlength='max'
:label="$t('Save new name')"
required
clearable
#keyup.enter.prevent='onEnterPressed'
></v-text-field>
</v-flex>
<v-flex
xs12
md4
>
<v-btn
:loading="saving"
:disabled="!valid || saving"
color="info"
#click="processNewName"
>
<v-icon left dark>fa-save</v-icon>
{{ $t('Save') }}
</v-btn>
</v-flex>
</v-layout>
</v-container>
</v-form>
Currently these are my methods:
onEnterPressed() {
console.log('enter pressed');
},
processNewName() {
...
}
I'm using #submit.prevent to stop refreshing the page when the Enter button is hit.
So far everything seems to be working. However, when I hit the enter button, in the console I'm getting this error message:
Uncaught TypeError: Cannot read property 'type' of undefined
at e.setFieldValue (onloadwff.js:71)
at HTMLFormElement.formKeydownListener (onloadwff.js:71)
In onloadwff.js the error points to the following code:
if("password"===r.type)
So r is undefined. How can I prevent this from happening? I already tried to use #keyup.enter.prevent.native, tried #keydown.enter.prevent, tried to point #submit.prevent to processNewName method... This error keeps showing up.
I checked in Vuetify site the v-text-field component, and it seems that sometimes they also get this error in some of their examples, but not all of them. But I can't figure out what to do to prevent this from happening. Any ideas?
EDIT
Upon further investigation I fount out that onloadwff.js belongs to LastPass plugin. Checked in different browser without that plugin and saw everything works just fine.
This error comes from your LastPass plugin and it is discussed on Github on various frameworks:
vuejs/vue-cli
KillerCodeMonkey/ngx-quill
mui-org/material-ui
SAP/openui5
It's not the best solution, it's more like a workaround, but for now I either:
Disable LastPass
Avoid using <v-form>
I am trying to add vee-validate rule on Validation Provider of password and confirm password. v-validate must be working where I had to add rules to a textbox. But here in my case, I must have to use Validation Provider. Please help!!!
Versions
vee-validate: 2.1.7
vue: 2.9.6
Code
<ValidationObserver ref="adminInfo">
<v-layout row wrap>
<v-flex xs12 md6>
<ValidationProvider name="password" rules="required|min:5|max:35" ref="password">
<v-text-field
solo
v-model="administratorInfo.newPassword"
label="Set New Password"
required
slot-scope="{
errors,
valid
}"
:error-messages="errors"
:success="valid"
></v-text-field>
</ValidationProvider>
</v-flex>
<v-flex xs12 md6>
<ValidationProvider name="confirm password" rules="'required|confirmed:password'">
<v-text-field
solo
v-model="administratorInfo.cNewPassword"
label="Confirm Password"
required
slot-scope="{
errors,
valid
}"
:error-messages="errors"
:success="valid"
></v-text-field>
</ValidationProvider>
</v-flex>
</v-layout>
</ValidationObserver>
Getting error:
Cannot read property '$watch' of undefined
Finally found solution by replacing ref="password" to vid="password". Found solution here.
But I did not understood what is and why vid?
This might be unrelated but make sure you have a v-model in your ValidationProvider of confirm password
In case someone is looking for how to pass vid when rules are an object:
<validation-provider :rules="{ required: true, max: 100, confirmed: 'confirmar' }" v-slot="validationContext"> </validation-provider>