How to list tags followed by a "new tag" entry?

[wpq]

I have a set of tags that I would like to edit. The following code works but …

 <div>
      <q-chip
        removable
        @remove="deleteTag(tag)"
        v-for="tag in displayedNote.tags">
        {{ tag }}
      </q-chip>
      <q-input
        v-model="newTag"
        label="Add new tag"/>
    </div>

… the “Add new tag” entry is under the list of tags:

What would be the best way to have all the elements on one line?

[nededa]

@wpq this is some basic css question not really related to quasar or even js. Lots of ways to accomplish this for one you could add float:left to all elements.

Also check quasar select component it already does what you’re trying to accomplish https://quasar.dev/vue-components/select#Example--Selected-item-slot

[wpq]

@nededa

this is some basic css question not really related to quasar or even js. Lots of ways to accomplish this for one you could add float:left to all elements

I wanted to use the framework directly - otherwise I would indeed do it manually (via Grid or Flexbox).

Also check quasar select component it already does what you’re trying to accomplish https://quasar.dev/vue-components/select#Example--Selected-item-slot

I will try that. My input is free form text but I will try to undertsnad how slots work here.

[wpq]

Should someone stumble upon the same issue, this is how I finally did it using purely the framework:

    <div>
      <q-input v-model="newTag" label="New...">
        <template v-slot:before>
          <q-chip
            removable
            @remove="deleteTag(tag)"
            v-for="tag in displayedNote.tags">
            {{tag}}
          </q-chip>
        </template>
      </q-input>
    </div>

[iamyohanarias]

@wpq Thank you so much. It was very useful for me. I did some changes and it’s working perfectly!

[iamyohanarias]

@wpq said in How to list tags followed by a "new tag" entry?:

Should someone stumble upon the same issue, this is how I finally did it using purely the framework:

    <div>
      <q-input v-model="newTag" label="New...">
        <template v-slot:before>
          <q-chip
            removable
            @remove="deleteTag(tag)"
            v-for="tag in displayedNote.tags">
            {{tag}}
          </q-chip>
        </template>
      </q-input>
    </div>

I did some changes to achieve my goal.

<q-input v-model="newTag" outlined @keyup.enter="addTag" dense>
            <template v-slot:prepend>
              <q-chip
                removable
                @remove="form.tags.splice(key, 1)"
                v-for="(tag, key) in form.tags" :key="key">
                {{tag}}
              </q-chip>
            </template>
          </q-input>