Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a workaround for this problem? I attempted to use v-combo-box, but it only works when Enter is pressed, and I cannot retrieve the search value from v-model when clicking on the icon within v-combo-box.

https://i.sstatic.net/VMCje.png

<template>
  <div>
    <!-- <v-combobox v-model="search" chips clearable @keyup.enter="onEnter">
      <v-icon small @click.stop="submit"> fas fa-search </v-icon>
    </v-combobox> -->
    <v-text-field chip v-model="search" label="Search" hint="Company and Campaign Name" clearable autofocus append="hey" @keyup.enter="onEnter">
      <v-icon slot="append" small @click="submit"> fas fa-search </v-icon>
    </v-text-field>
  </div>
</template>

<script>
import Vue from 'vue'

export default Vue.extend({
  name: 'MultiSearch',
  data() {
    return {
      search: '',
    }
  },
  methods: {
    submit(event) {
      event.preventDefault()
      console.log('this search', this.search, event)
      this.$emit('updateSearch', this.search)
    },
    onEnter(event) {
      console.log('this search', this.search)
      this.$emit('updateSearch', this.search)
    },
  },
})
</script>

<style lang="stylus" scoped>
.v-text-field >>> .v-label
    color:black !important
    caret-color: black !important

.v-text-field >>> .v-input__control
        color:black !important
        caret-color:black !important

@media only screen and (min-width:320px) and (max-width:480px){
  .v-text-field{
      width:200px;
  }
}

.v-text-field{

}
</style>

Answer №1

@curiosityrock, You can display a chip inside the text field

Check out the code snippet below:

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col
            cols="12"
            sm="6"
            md="3"
          >
            <v-text-field
              label="Regular"
              v-model="textBox"
            >
              <template v-slot:append> 
                <v-btn icon @click="addChips"><v-icon>mdi-magnify</v-icon></v-btn></template>
              <template v-slot:prepend-inner>
                <div v-for="(chipText , index) in chipData" :key="index">
                  <v-chip class="ma-1">{{chipText}}</v-chip></div>
              </template>
            </v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
      return {
        chipData: [],
        textBox: "",
      }
  },
  methods: {
    addChips() {
      if (this.textBox.length) {
        this.chipData.push(this.textBox)
        this.textBox = ""
      }
    }
  }
})

You can view the working example on CodePen here: https://codepen.io/chansv/pen/wvggwWj?editors=101

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the size of a Highcharts chart before printing

I'm facing an issue with a chart that doesn't have a specified height or width. My goal is to print the graph in a taller and larger size when I click on the print button. I attempted to use setSize() function, but since there are no original di ...

Which HTTP headers pertain to the loading of iframes? nuxt-helmet

Can anyone explain which security headers are associated with iframe loading issues and may prevent the iframe from being loaded? I implemented nuxt-helmet to configure security headers in my nuxt project. However, after uploading my site to a server loca ...

`Vue testing utilities fail to refresh component following click event`

My current testing setup involves using vue-test-utils/mocha-webpack/expect to test the component code below: <template> <div> <div id="agent-customer-container" class="top-tabs" v-if="agentName || customerName || miniBasket"> ...

Creating a CSS navigation sub menu

I am having trouble with my CSS code regarding the sub navigation menu. It seems to close as soon as I try to select an option. I suspect that there might be something wrong with the last CSS style. Currently, it only shows when you hover over it but disap ...

Experience interactive video playback by seamlessly transitioning a webpage video into a pop-up when clicking on an

I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...

What could be causing the div to be wider than the content inside of it?

I am having an issue creating a webpage with a 20-60-20 flex fill layout. The div in the center, which should occupy 60% of the page, is wider than its content, causing it to appear off-center. https://i.stack.imgur.com/WwCJy.png Here is my home.componen ...

The instance is referencing "firstName" during render, but it has not been defined as a property or method

I am encountering a persistent warning message related to the inputs on my Signup.vue page. This warning is appearing for all four input fields in my code: firstName lastName email password The warning mentioning specific instances keeps popping up consi ...

Tips for achieving a full div image on hover

I'm having trouble with my CSS code for an image hover effect in a div. The image is appearing larger than the div and leaking out of it. How can I make sure the image stays contained within the div? Here's the updated CSS code: img { display ...

Issue with fixed sidebar on brief content

It's interesting how the sticky widget performs differently on long articles compared to short ones on my website. Here is an example of a long article where the sticky widget works well without any lag: . Now, let's take a look at a shorter art ...

Animate in Angular using transform without requiring absolute positioning after the animation is completed

Attempting to incorporate some fancy animations into my project, but running into layout issues when using position: absolute for the animation with transform. export function SlideLeft() { return trigger('slideLeft', [ state('void&a ...

Raise the image above the wrapping div, positioning it at the very bottom

I'm struggling to position an image within a div in a way where: it protrudes above the div it begins at the very bottom of the div (with a small gap that I can't eliminate) Below is the relevant HTML code snippet: <div class="teaser-imag ...

Leverage Vue data within your stylesheet

Is there a way to access Vue data within my style sheet? I typically write in Sass, but I don't believe that is the root of the problem. The following attempt did not yield the desired results: #app background-color: {{ myText }} ...

Updating the Background Color of a Selected Checkbox in HTML

I have a straightforward question that I've been struggling to find a simple answer for. Can anyone help me with this? Here's the checkbox code I'm working with: <input type="checkbox"> All I want to do is change the backgr ...

Passing Variables to Child Components with Vue Slots

Imagine creating a button component with a variable named myVar: MyButton.vue <template> <div> <slot :name="text"> My Button </slot> </div> </template> <script> export default { name: 'm ...

Using only CSS to swap out periods in OL>LI elements for a different style

Is there a way to customize the punctuation used in lists in HTML and CSS? For instance, can the standard period at the end of list items be changed to a right parenthesis or removed altogether? Concept Below is an example of improper CSS attempting to a ...

Using V-model binding in Vue always resets the content of text inputs

I am facing an issue with a Text Input that is filled based on a string stored in cookies, similar to a Remember me feature. When I bind the value of the input to the cookie using :value, I am unable to type a new value even if there is no cookie being sto ...

Utilizing Vue.js and i18n to fetch external JSON files from a server and seamlessly integrating them as globally accessible data in all components

I'm currently exploring ways to fetch translation files from a server and make them accessible across all components of the project. For instance, I can request to obtain this JSON: { "DASHBOARD_SETTINGS": "Einstellungen", ...

Tips for generating a new div for every iteration:

I am currently using asp.net with c# along with a Master Page. I have been attempting to create a new div for each loop in the while statement in order to customize the design as I desire. Is there a way to achieve this or is there an alternative method th ...

`CSS Animation fails to run in Internet Explorer and Microsoft Edge browsers`

My issue with the CSS animation is that while the opacity animates properly, the translate effect does not seem to work as expected. You can see the problem here: https://jsfiddle.net/bLxb8k3s/ It appears that the reason for this issue is because IE and ...

Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

I attempted to center a div containing 2 photos perfectly in the center, but encountered some issues. Despite trying various positioning techniques such as display: flex, align-items, justify-content, and more, I couldn't get the image container to mo ...