英文:
Quasar tags input
问题
<q-input outlined v-model="tags" label="添加标签">
<template #prepend>
<q-badge v-for="tag in tags"> {{ tag }} </q-badge>
</template>
</q-input>
这是来自Quasar框架的q-input，我正在尝试将每个单词都作为标签。
我在脚本中尝试将标签模型设置为对象数组或仅数组，但最终每个字母都单独成为一个标签。
英文:
<q-input outlined v-model="tags" label="Add tags">
<template #prepend>
<q-badge v-for="tag in tags"> {{ tag }} </q-badge>
</template>
</q-input>
This is q-input from quasar frame work i'm trying to make every word as a tag
I tried in script that the tags model will be array of objects or just array but it ends with every letter in tag alone
答案1
得分: 1
以下是您要翻译的内容：
输入元素返回单个字符串值。 typeof (tags) === 'string'。当您循环遍历字符串值时，v-for 会逐个迭代其字符。
为了将每个输入的值显示为标签，您需要将不同输入的历史记录存储在单独的数组中。
一个非常简单的解决方案可以是：
<template>
<q-input outlined v-model="tag" @keydown.enter="saveTag" label="添加标签">
<template #prepend>
<q-badge v-for="tag in tagList" :key="tag">{{ tag }}</q-badge>
</template>
</q-input>
</template>
<script setup lang="ts">
const tag = ref('');
const tagList = ref<Array<string>>([]);
function saveTag() {
if (!!tag.value?.trim()) {
tagList.value.push(tag.value);
tag.value = '';
}
}
</script>
在这里，我在按下回车键后保存每个标签。
tagList 数组包含了您所有的标签，以供进一步使用。
英文:
The input element returns a single string value. typeof (tags) === 'string'. When you loop over a string value, v-for iterates over its characters (one by one).
To show every entered value as a tag, you need to store the history of different inputs in a separate array.
A very simple solution can be:
<temlapte>
<q-input outlined v-model="tag" @keydown.enter="saveTag" label="Add tags">
<template #prepend>
<q-badge v-for="tag in tagList" :key="tag"> {{ tag }}</q-badge>
</template>
</q-input>
</template>
<script setup lang="ts">
const tag = ref('');
const tagList = ref<Array<string>>([]);
function saveTag() {
if (!!tag.value?.trim()) {
tagList.value.push(tag.value);
tag.value = '';
}
}
</script>
Here, I save every tag after pressing the enter key.
The tagList array contains all your tags for further use.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论