Skip to content

Instantly share code, notes, and snippets.

@uno-de-piera
Last active August 15, 2019 06:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save uno-de-piera/3be56a4e9d53fb72a041c199ed6f645a to your computer and use it in GitHub Desktop.
Save uno-de-piera/3be56a4e9d53fb72a041c199ed6f645a to your computer and use it in GitHub Desktop.
<template>
<form>
<v-layout row wrap>
<v-flex xs12 md6 lg6 pl-1 pr-1>
<form-group name="roles">
<template slot-scope="{ attrs }">
<v-select
multiple
chips
:height="33"
v-bind="attrs"
:items="roles"
item-disabled="isDisabled" <!-- la clave para deshabilitar ciertos elementos -->
v-model="form.roles"
label="Roles"
item-text="name"
item-value="name"
@input="$v.form.roles.$touch()"
@blur="$v.form.roles.$touch()"
>
<template slot="item" slot-scope="props">
<v-checkbox
:label="props.item.name"
></v-checkbox>
</template>
<template slot="selection" slot-scope="props">
<v-chip
small
:selected="props.selected"
class="chip--select-multi"
:key="props.item.name"
>
{{ props.item.name }}
</v-chip>
</template>
</v-select>
</template>
</form-group>
</v-flex>
</v-layout>
</form>
</template>
<script>
import { required } from "vuelidate/lib/validators";
import includes from "lodash/includes";
export default {
name: "Form",
data() {
return {
roles: [
{ name: "ROOT" },
{ name: "ADMIN" },
{ name: "CUSTOMER" },
{ name: "GUEST" }
],
form: {
roles: []
}
};
},
watch: {
"form.roles": function(newVal) {
this.roles.forEach(role => {
role.isDisabled = false;
if (includes(newVal, "ROOT")) {
role.isDisabled = role.name === "GUEST";
}
if (includes(newVal, "GUEST")) {
role.isDisabled =
role.name === "CUSTOMER" || role.name === "ADMIN";
}
});
}
},
validations: {
form: {
roles: { required }
}
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment