Allow first tag to be selected on enter key

Also allow the Label to be modified; code style too
Signed-off-by: 's avatarMicheal Mand <micheal@kmdwebdesigns.com>
parent 9d391c98
<template> <template>
<el-form-item label="Tags"> <el-form-item :label="label">
<el-select v-model="tags" multiple filterable allow-create remote @change="triggerEvent"> <el-select v-model="tags" multiple filterable allow-create remote default-first-option @change="triggerEvent">
<el-option v-for="tag in availableTags" <el-option v-for="tag in availableTags"
:key="tag.slug" :key="tag.slug"
:label="tag.slug" :label="tag.slug"
:value="tag.name"> :value="tag.name"
</el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
<script> <script>
import axios from 'axios' import axios from 'axios';
export default { export default {
props: { props: {
namespace: {String}, namespace: { type: String },
currentTags: {default : null}, label: { type: String, default: 'Tags' },
currentTags: { default: null },
}, },
data() { data() {
return { return {
tags: {}, tags: {},
availableTags: {}, availableTags: {},
} };
}, },
methods: { methods: {
triggerEvent() { triggerEvent() {
this.$emit('input', this.tags); this.$emit('input', this.tags);
} },
}, },
watch: { watch: {
currentTags: function () { currentTags: function () {
if (this.currentTags !== null) { if (this.currentTags !== null) {
this.tags = this.currentTags; this.tags = this.currentTags;
} }
} },
}, },
mounted() { mounted() {
axios.get(route('api.tag.tag.by-namespace', {namespace: this.namespace})) axios.get(route('api.tag.tag.by-namespace', { namespace: this.namespace }))
.then(response => { .then(response => {
this.availableTags = response.data; this.availableTags = response.data;
}); });
} },
} };
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment