When setValue is called on VCheckbox in Vuetify, it emits an event called "update:modelValue"

After setting a value for the checkbox, I encountered a warning message: [Vue warn]: Component emitted event "update:modelValue" but it is neither declared in the emits option nor as an "onUpdate:modelValue" prop.

Example.vue

<script setup lang="ts">
import { VForm } from 'vuetify/components'

const privacyPolicies = ref<boolean>(false)
</script>

<template id="register-form">
  <VCardText>
    <VForm
      id="registerForm"
      class="mt-4"
    >
      <VRow>
        <VCol cols="12">
          <VCheckbox
            v-model="privacyPolicies"
            data-privacy-policy
          />
        </VCol>
      </VRow>
    </VForm>
  </VCardText>
</template>

Example.test.ts

import TestRegister from '@/pages/components/example.vue'
...

describe.concurrent('Example.vue', () => {
  let wrapper: VueWrapper

  beforeEach(() => {
    wrapper = mount(TestRegister, {
      global: {
        plugins: [
          createVuetify({ components, directives }),
        ],
      },
    })
  })

  it('performing a test', async () => {
    const checkBoxSelector = '[data-privacy-policy]'

    await wrapper.findComponent<typeof VCheckbox>(checkBoxSelector).setValue(true)
  })
})

Answer №1

wrapper setValue is specifically designed for manipulating HTML input elements and not components like VCheckbox, which is a VueComponent. To work with VCheckbox, consider using

await wrapper.findComponent<typeof VCheckbox>(checkBoxSelector).value = true
;

If you wish to modify the value of an HTML input element, you can also use:

await wrapper.get('.text-field__input').setValue(true)

To address this issue, refer to the link below:

https://github.com/vuejs/vue-test-utils/issues/1883

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

The Radio button and Checkbox values are causing an issue where the Radio button is continuously summing upon clicking without a limit. Why is this happening? Check out

I'm currently stuck in a function and believe it would be helpful for you to guide me along the correct path. My goal is to sum the values of checked boxes with the values of checked radio buttons. However, the radio values are continuously accumulat ...

Angular filter is causing an error message saying "Unable to interpolate," but the filter is functioning as expected

I have implemented the filter below (which I found on StackOverflow) that works perfectly fine on one page. However, when using the same object, it throws an error as shown below: app.filter('dateFormat', function dateFormat($filter){ return f ...

Creating a map-like scrolling feature for a full-sized image, allowing both horizontal and vertical movement

My goal is to create an infographic image that can be scrolled horizontally and vertically, zoomed in or out, and where I can add markers just like Google Maps. I attempted the solution of using two scroll views as suggested here: https://github.com/faceb ...

Add a fresh listing arranged alphabetically using either JavaScript or jQuery

I currently have a set of lists that are already alphabetically sorted. For example: <ul> <li><a href='#'>Apple</a></li> <li><a href='#'>Banana</a></li> <li><a href=& ...

Run a PHP statement when a JavaScript condition evaluates to true

I am attempting to run a php statement if my javascript condition is true. Here is the code snippet that I have written: <input id="checkbox1" type="checkbox"> MSI<br></input> <script> $(document).ready(function(){ $(&apos ...

Does the use of 'window.location.replace' in Chrome cause a session to be destroyed in PHP when redirecting to a specified page?

Apologies if the question seems a bit convoluted, but let me explain the scenario. Here is an example of an Ajax function I am working with: $.ajax({ url:"../controllers/xx_register.php", type:"POST", data:send, success: function(resp ...

Looking to spice up your static HTML site? Dive into the world of Ruby on

I recently developed an app that features a static HTML webpage containing text and images, and now I'm interested in incorporating Ruby on Rails to explore its capabilities further. After creating a basic RoR application, I copied the HTML content f ...

Arrange two arrays by organizing them based on the contents of one in JavaScript

Consider the following two arrays: priceArray= [1, 5, 3, 7] userIdArray=[11, 52, 41, 5] The goal is to sort the priceArray in such a way that the userIdArray also gets sorted accordingly. The desired output should look like this: priceArray= [1, 3, 5, ...

Is there a way to make the console output more visually appealing with some styling?

What techniques do programs such as npm and firebase use to generate visually appealing and informative console output during command execution? Consider the following examples: $ firebase deploy or $ npm i <some-package> ...

Issue with displaying Bootstrap modal on top of another modal

Upon clicking the "Click me here" button, a modal pops up and displays a toast message expressing gratitude. The thank you modal should remain open on top of the save modal even after clicking save. However, upon saving, an error message appears: Cannot r ...

Automatically collapse the Shadcn-UI Accordion when the mouse exits

For my self-education project, I am working on building a sidebar with an accordion using Shadcn-ui, NextJS (13.4), React, and Node. Being new to these technologies, I have encountered a problem that I can't seem to solve. The sidebar expands on mous ...

Is there a way to access the sqlite3 database file in electron during production?

Currently, I have an electron application that I developed using the create-electron-app package. Inside the public folder of my Electron app, both the main process file and the sqlite3 database are located. During development, I can access the database ...

Assistance needed to make a jQuery carousel automatically rotate infinitely. Having trouble making the carousel loop continuously instead of rewinding

Currently, I am in the process of creating an auto-rotating image carousel using jQuery. My goal is to make the images rotate infinitely instead of rewinding back to the first image once the last one is reached. As a beginner in the world of jQuery, I&apos ...

Generating various fields within a single row

I am in the process of creating a dynamic form that should generate two new fields in the same line when the user clicks on the plus icon. Currently, the code I have only creates a single field. I attempted to duplicate the code within the function, but i ...

Guide to launching my application by clicking on a file from a local device using React Native

Currently, I am working with React Native and Expo. I have a file with a unique extension (let's say: SomeFileName.xxx) which contains some text. My goal is to open this file from the device in such a way that it launches the application (either on An ...

Pass the response from a JavaScript confirm dialog to a Ruby program

Apologies if this question seems naive, but I am curious if it is feasible to pass the response from a JavaScript confirm box or message box as a value to a Ruby program. If I were to click on the "yes" button in the confirm box, could this response be st ...

Tips for showcasing personalized validation alerts with jQuery in the HTML5 format?

One of the Javascript functions I designed is for validating file extensions before uploading: function validateFileExtension(field, extensions){ file_extension = field.val().split('.').pop().toLowerCase(); if ($.inArray(file_extension,exten ...

Mastering the art of using res.send() in Node.js

I have been working on a project using the mongoose API with Node.js/Express. There seems to be an issue with my get request on the client side as the data is not coming through. Can someone help me figure out what's wrong? Snippet of backend app.ge ...

The `XMLHttpRequest.prototype.open` function does not capture every single HTTP request visible in the chrome-dev-tools

While utilizing a third-party embedded code that initiates HTTP requests with a request header origin different from my own, I encountered an issue. Despite attempting to intercept these HTTP requests using XMLHttpRequest, they do not get intercepted. This ...

JavaScript preloader failing to wait for images to load

I came across this Javascript code to enable the pre-loader on my website. However, I noticed that it disappears as soon as the page loads, instead of waiting for all images to finish loading. After some research, I found a suggestion to use window.onload ...