How can v-select be prompted to provide the selected string for the purpose of executing a function within the calling context?

How can I make this call?

  <ValidWordList
    :items="answer.WordList"
    :labelText="answer.WordList.length + ' Words'"
  
  /></template>

I need to select a string from the items array in order to execute this function:

function select(word: string) {
  console.log(word)
  answer.value = word
}

Below is the component structure:

<template>
  <v-select :items="items" return string :label="labelText" ></v-select>
</template>

<script setup lang="ts">
export interface Props {
  items?: string[]
  labelText: string
}

const props = defineProps({
  items: {
    type: Array,
    default: ''
  },
  labelText: {
    type: String,
    default: ' Words'
  }
})
</script>

I'm struggling to make it work and have tried using @input, @change, and emitting back, but nothing seems to be effective.

Answer №1

To establish a connection and trigger changes, utilize the v-model along with emit to broadcast a custom event. The parent component can then capture this event.

For instance, within a custom component:

<template>
      <v-select
            label="Select"
            v-model="msg"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            return-object
            ></v-select>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
const emit = defineEmits<{
  (e: 'change', value: string): void
}>()
const msg = ref('');
function selectF() {
    console.log('msg', msg.value)
    emit('change', msg.value)
}
watchEffect(() => selectF())

</script>

As for the parent component:

<template>
  <v-app>
    <v-main>
      <Comp @change="onChange" />
      Selected Item - {{select}}
      
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import Comp from './Comp.vue';
const select = ref('');
function onChange(e) {
    console.log('e', e);
    select.value = e
}

</script>

An example showcasing this functionality is available in the Vuetify playground here.

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

Elevate your frontend development game with the powerful combination of Vue js 3

I've been attempting to add this dependency, but I keep receiving an error message stating that it doesn't exist and Vue 3 is unable to resolve the component. Click here to visit the npm page for vue-phone-number-input Any assistance you can pr ...

"Identifying the exact number of keys in a JSON object using

Is there a key in the JSON data that may or may not exist? How can I determine the total number of occurrences of this key using jQuery? JSON : jasonData = [{"test":"sa3"},{"test":"4s"},{"acf":"1s"},{"test":"6s"}]; I need assistance with implementing th ...

Adjust the CSS property of a div to have a fixed position when scrolling

I attempted to implement a fixed div on scroll in Vue.js using the following code: ... async created() { window.addEventListener('scroll', this.calendarScroll); } methods: { calendarScroll() { console.log('Scroll'); cons ...

The Process of Developing Applications

As a newcomer to web development, I have a solid understanding of HTML and CSS, and am learning JavaScript. When considering creating a web app, would it be better for me to focus on writing the functionality in JavaScript first before integrating it int ...

Mongoose and ES6 promises are not delivering the expected results

I'm currently working on a piece of code that involves creating an array of promises to save specific numbers. The issue I'm facing is that when the output is printed, it displays the same record 10 times. Below is the code snippet: 'use s ...

Which Web Browsers Support Canvas and HTML5?

Currently working on a project that involves using the HTML5 Canvas element. I am curious about which major browsers (including specific versions) actually support the Canvas tag. I am not interested in hearing about IE. In this tutorial Drawing shapes - M ...

Receiving an unexpected error message related to Vuex in the watcher function, even though I am not utilizing Vuex in my N

My goal is to update an object property in an array [{ text: 'some text' value: 'some value, active: false }, etc..] from false to true when I click on a checkbox that is connected to a v-model: <v-col v-for="(item, i) in searchModul ...

Extract the names and corresponding keys from an array, then display them as a list

I am currently working on extracting key names and sub key names from a file in order to display the results in a list format as shown below. Anna was removed by AdminWhoRemoved due to Removal Reason Ethan was removed by AdminWhoRemoved due to Removal Re ...

What is the process for extracting the "user_id" from the token payload and inserting it into the JSON POST form in Django REST with SimpleJWT and Vue3?

After storing access and refresh tokens in my local storage, I have decoded the access token and found the "user_id" in the payload. However, I am struggling to comprehend how to include this "user_id" in a POST request to the REST API. Is it retrieved fro ...

Utilizing Vuetify 2 skeleton-loader to customize loading states through Vuex store manipulation

Utilizing the Vuetify v-skeleton-loader component to wrap a v-data-table component. The server-side pagination and sorting in the data-table component are set up. To enable server-side pagination, the documentation recommends monitoring the options objec ...

the display window is not visible

After implementing the following asp.net server code, my page is being redirected without displaying the print window: ScriptManager.RegisterStartupScript(this, typeof(Page), "printGrid", "javascript:window.print();", true); Page.Response.Redirect(Page. ...

Symfony Web Alerts

Seeking advice on how to implement web notifications, similar to Podio / Facebook notifications, on my website built with Symfony 4.2 and vue.js. I have explored socket.io but as it is node-based, I am unsure if it can be integrated with Symfony. Additiona ...

Creating a unique custom selector with TypeScript that supports both Nodelist and Element types

I am looking to create a custom find selector instead of relying on standard javascript querySelector tags. To achieve this, I have extended the Element type with my own function called addClass(). However, I encountered an issue where querySelectorAll ret ...

Setting up a Web application testing environment on its own

Embarking on my journey in web application development and testing, I am currently involved in a project that requires me to create a standalone environment for testing the web application. The main goal is to ensure the web application is easily testable ...

Passing a JavaScript variable to a URL parameter can be achieved by

Can anyone advise me on passing JavaScript string variables and displaying them in the URL? For instance, let's say the URL is "xyc.com". Upon populating a variable (a), I wish for that variable to appear in the address bar as URL = "xyc.com/?a=". Cur ...

InvalidMethodError: Offspring cannot be invoked as a function

Provided below is the code for editing the onsubmit function in my create category javascript file. The objective is to capture user data and store it in a Firebase database. import React, { Component } from 'react'; import Dropzone from 'r ...

Is there a way to have incoming messages automatically align to the left or right based on the sender, without using the float property?

I am currently working on a webpage where I want the messages sent by different users to appear in a yellow conversation window based on who sent them - user 1 or user 2. I want it to mimic the messaging layout commonly seen on phones, distinguishing betwe ...

focusing on a single div amidst a sea of interwoven dynamically generated divs

I am currently working with the liferay framework and I am facing a challenge where I need to apply inline JavaScript to target a very specific div on my webpage. The catch is that this div is nested within multiple dynamically added divs with varying clas ...

Navigating with jQuery Scrollbars

Looking to incorporate a bit of animation in jQuery, trying out the following line: window.parent.scroll(coord[0], coord[1]); The next block of code doesn't seem to be achieving what I had in mind. Do you have any suggestions? $(window.parent).anim ...

Which is more effective: using the try-catch pattern or the error-first approach

My main focus is on node.js and express.js, although I am relatively new to JavaScript overall. When it comes to error handling, the official recommendation is to use the try-catch pattern. However, some developers argue in favor of sticking with the tradi ...