I'm using vue-js2.3 and element-ui.
I would like to define the validation rules of my form dynamically
Example
https://jsfiddle.net/cgL6y9kq/
Problem
The required is not dynamically defined by phoneMandatory
Questions
How can I change the attribute on an existing rule dynamically?
How can I add or remove rules dynamically ?
You have your rules property in the component's data method. This means it will not updated based on changes to other data properties.
You should use a computed property for rules instead:
computed: {
rules() {
return {
phone: [{
required: this.phoneMandatory,
message: 'Please input phone',
trigger: 'blur'
}]
}
}
},
Now, when this.phoneMandatory updates, so will the component's rules property.
Here's a working fiddle.
Related
I'm using bootstrap-vue table, according to documentation regarding formatter callback: https://bootstrap-vue.org/docs/components/table .
A variable is defined in data(), I will need this variable as a flag to control the cell content.
data() {
return {
aFlag: 0,
}
}
Then in the fields I use the formatter call back:
{ key: 'value', label: 'Value', formatter: this.updateValue},
In the methods area I use updateValue to update the flag:
methods: {
updateValue(value) {
..
aFlag = value
..
}
}
Then error "You may have an infinite update loop in a component render function." happened here.
If I want to do such a thing, is there any best practice? The cell content may cause other cell's change, so currently I use a variable to control the behavior as a flag. Thanks in adavance.
The formatter callback is only intended to change how the value is displayed to the user, not change its value.
If you want to be able to change the value, I'd suggest using a slot for the value property and use v-model on a form component within the slot:
<template v-slot:cell(value)="data">
<input type="text" v-model="data.value"/>
</template>
I have a component command-button wrapping a Vuetify v-btn component.
command-button receives a property called disabled of type boolean, non-required and false by default.
command-button is being used inside another component called toolbar where inside a v-for loop I add the command-button using a configuration array of actions objects passed to toolbar as a property.
<command-button
v-for="(action, index) in actions"
:key="index"
:label="action.label"
:disabled="action.disabled"
#click="action.handler"
></command-button>
When I use my toolbar component in my view component like this:
<toolbar :actions="actions"></toolbar>
I declare the actions of the toolbar in the data of my view component, as follows:
data() {
return {
...
actions: [
{
label: "Delete",
handler: this.onDelete,
disabled: this.disable // This can be a computed or a data element
},
{
label: "Add",
handler: this.onAdd
}
],
...
},
The issue is that the command-button is not being disabled dynamically, no matter if I use a computed or a member in data. It only works if I use the literal true inside the actions configuration object. Making some debugging, the value received inside toolbar for the disabled attribute of actions element is undefined.
You can't reference a computed property in your data object as it won't be defined when the instance is created. You could add a watcher on this.disable and update the value of actions[0].disabled when it changes.
I am using a component from a library which provides properties to set some texts:
props: {
placeholder: { type: String, default: "Select something" },
// ... More text properties here
}
Usage
// Shows "Select something" when no value selected
<vue-multiselect></vue-multiselect>
// To show something else, you can specify the prop
<vue-multiselect placeholder="Another message here"></vue-multiselect>
All across the application we will be using the same texts, and of course, we would like to avoid repeating it everywhere.
// Shows "This is the default text" when no value selected
<vue-multiselect></vue-multiselect>
Given that we have no control on the component, how can we set those property defaults globally?
Vue plugin? Vue directive?
I am quite ok with most basic vue concepts (custom components, events, binding, etc.) but as I don't know plugins and directives I am stuck on that one.
I've seen props being define like:
props: ['message', 'name', 'something']
and
props: {
imperfectNumber: {
type: Number,
required: true
}
}
Whats the difference and how can I define some props that require no validation and others that do all in the same block?
Once you go down the object definition route, you have to do that with all the props. You can't mix them.
You can find more information about the props here: https://v2.vuejs.org/v2/guide/components.html#Prop-Validation
Note:
Instead of defining the props as an array of strings, you can use an
object with validation requirements
I've highlighted the part in the manual that explains. This indicates you can do one or the other.
I am using vue-tables to show some tabular data. I am trying to extend vue-tables to make cells in certain columns editable. Therefore I created a vuejs child component called "editable-cell" which is able to edit cell content. This child component is inserted as a vue-tables template for the editable column.
These are my vue-tables options:
headings: {
title: 'Title',
description: 'Description',
createdBy: 'Created By',
createdAt: 'Created At',
updatedAt: 'Updated At',
},
compileTemplates: true, // compile vue.js logic on templates.
templates: {
title: function(row) {
return '<editable-cell row-id="'+row._id.$oid+'" key="title" value="'+row.title+'"></editable-cell>'
},
Currently I am only passing the plain string value of row.title down to the child component.
My problem: When that is updated, then the data in the parent component is not changed. I know about two-way binding of properties with :value.sync="..." but how do I do that when I want to bind to the right element in parent data?
vue-tables only passes the row to the template function. How do I then bind to the correct element in the parent data array?
UPDATE I managed to create a JSFiddle that shows my problem:
https://jsfiddle.net/Doogie/nvmt0vd7/
I found one possible solution:
When you pass an object down to the child component, then it is passed by-reference. That means when the child component updates the properties of this object, then the changes are immideately visible in the parants data.
So I simply pass down the whole row to each editable-cell. Then it can update its property/value in that row.