Это метод для создания входных тегов, которые могут быть выборочно удалены пользователем. В идеале я хотел бы, чтобы массив тегов располагался в одной строке. В настоящее время, однако, каждый тег находится на новой строке. Я подозреваю, что это .pu sh, но я так и не смог выяснить, почему.
<template>
<div>
<form>
<div class="input-wrapper">
<input type="text" v-model.trim="tag" placeholder="Type here" @keypress.prevent.stop.enter="addTag">
<button @click.prevent.stop="addTag">Add</button></div><br>
<div class="tag" v-for="(tag, index) in tags" :key="index">
<span>{{ tag }}</span><span class="delete" @click="tags.splice(index, 1)"> ×</span></div>
<div class="item">
<button type="reset" on:click="resetProgress">Reset</button>
<button type="submit" value="submit">Submit</button></div>
</form>
</div>
</template>
<script>
export default {
props: {
value: {
type: Array,
default: () => []
}
},
watch: {
tags(n, o) {
this.$emit('input', n);
}
},
data() {
return {
tag: '',
tags: this.value || [],
};
},
methods: {
addTag() {
if (this.tag && ! this.tags.includes(this.tag)) {
this.tags.push(this.tag);
this.tag = '';
}
},
}
}
</script>