Skip to content

Instantly share code, notes, and snippets.

@GoldraK
Last active September 18, 2018 12:42
Show Gist options
  • Save GoldraK/da14798b84dc713527f461003370c0d3 to your computer and use it in GitHub Desktop.
Save GoldraK/da14798b84dc713527f461003370c0d3 to your computer and use it in GitHub Desktop.
Component for vuetify, a select with input with input for others, you can configure which item opens the option of others. Thanks @jdonsan @nekosaur for the help.
<template>
<v-container>
<v-layout row>
<v-flex xs12>
<v-select
:items="listitems"
:label="labelSelect"
:item-text="itemtext"
:item-value="itemvalue"
single-line
v-model="selectother"
></v-select>
<v-text-field v-show="selectother==otheritem"
:label="labelInput"
:rules="[requiredOther]"
v-model="otherdata"
></v-text-field>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
name: 'v-select-other',
props: {
listitems: {
type: Array,
required: true
},
labelSelect: {
type: String,
required: true
},
labelInput: {
type: String,
required: true
},
otheritem: {
type: Number,
required: true
},
itemtext: {
type: String,
required: true
},
itemvalue: {
type: String,
required: true
}
},
data () {
return {
selectother: '',
otherdata: ''
}
},
methods: {
},
watch: {
selectother: function () {
if (this.selectother !== this.otheritem) {
this.otherdata = ''
}
}
},
computed: {
requiredOther () {
if (this.selectother === this.otheritem) {
return !!this.otherdata || 'Required.'
}
return true
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment