[英]Quasar vue: How do I create a multi-input field as the attached image in quasar vue?
How do I create a multi-input field as the attached image in quasar vue?如何在 quasar vue 中创建多输入字段作为附加图像?
Is it just a text input that adds entries to a list?它只是将条目添加到列表的文本输入吗? If so here is a very quick and untested code as to how i would approach it:如果是这样,这是一个非常快速且未经测试的代码,用于说明我将如何处理它:
<template>
<div class="q-pa-md">
<div class="row">
<div class="col-6">
<q-input v-model="val" outlined />
<q-icon @click="addVal">add_circle</q-icon>
</div>
</div>
<div v-for="value in valuesList" v-bind:key="value" class="row">
<div class="col-6">
{{ value }}
<q-icon @click="removeVal(value)">remove_circle</q-icon>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
val: null,
valuesList: null
};
},
methods: {
addVal: function() {
if (this.val) {
this.valuesList.push(this.val);
this.val = null;
}
},
removeVal: function(valToRemove) {
const index = this.valuesList.indexOf(valToRemove);
if (index > -1) {
this.valuesList.splice(index, 1);
}
}
}
};
</script>
<style></style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.