Quasar vue：如何在 quasar vue 中创建多输入字段作为附加图像？

Question

如何在 quasar vue 中创建多输入字段作为附加图像？

多输入字段

Answer 1

它只是将条目添加到列表的文本输入吗？ 如果是这样，这是一个非常快速且未经测试的代码，用于说明我将如何处理它：

<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>