Obtain the value of v-model in a child component within VueJS

In my Vuetify App, I have implemented a Vue2Editor using a custom component called text-editor. Here is how it looks:

<vue-editor
  :value="text"
  @input="updateText"
></vue-editor>

The props for this component are defined as follows:

props: {
  text: {
    type: String,
    required: true
  }
},

To perform validation, I am utilizing the parent component by applying v-model attribute (necessary for VeeValidate):

<text-editor
  :text="UnitData.Details"
  v-model="UnitData.Details"
  @updateText="UnitData.Details = $event"
  data-vv-name="details"
  v-validate="'required|min:100'"
/>

Currently, both text and v-model contain the same values. I attempted to pass v-model as a prop into my child component using vModel, but encountered issues. Any helpful suggestions on how to avoid duplicate code in this scenario?

javascriptvue.jsvuetify.jsprop

Answer №1

text-editor module:

<vue-writer
  :content="content"
  @input="updateContent"
></vue-writer>

properties: {
  content: {
    type: String,
    required: true
  }
},
methods: {
  updateContent () {
    this.$emit('input', this.content)
  }
}

ancestor

<text-editor
  v-model="UnitData.Details"
/>

Check out https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

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

Comparison of valueChanges between ReactiveForms in the dom and component级主动形

Is there a method to determine if the change in valueChanges for a FormControl was initiated by the dom or the component itself? I have a scenario where I need to execute stuff() when the user modifies the value, but I want to avoid executing it if the v ...

javascripthtmlangulartypescriptangular-reactive-forms

Utilizing JQuery and Jade to extract and display information from a Node.js server

I am currently working with the Jade framework for frontend and using Node.js & express for backend development. When rendering a view with data, I am encountering an issue where I can't access this data using JQuery. Below is my service in Node.js ...

javascriptjquerynode.jsexpresspug

The functionality to move forward and backward in Modal Bootsrap seems to be malfunctioning

I am in need of assistance as I have encountered a major issue that has halted my work progress for several days. My goal is to implement a feature that allows users to navigate between different days both forwards and backwards. While the functionality it ...

javascripthtmljquerycss

Setting an if isset statement below can be achieved by checking if the variable

I have included a javascript function below that is designed to display specific messages once a file finishes uploading: function stopImageUpload(success){ var imagename = <?php echo json_encode($imagename); ?>; var result = '& ...

phpjavascriptjqueryajax

Retrieve the row id from the table by clicking on a button in a modal box using jQuery

I am encountering a challenge with a small task due to my limited experience in jQuery. I have a table where each row has an icon. When the icon is clicked, a modal box appears with some content. After closing the modal box, I want to retrieve the table ro ...

javascriptjquery

What is the process for activating and deactivating the scroll trigger within Material UI's useScrollTrigger module?

I'm currently working on setting up a survey page with Material UI in React. My goal is to have the survey questions appear when the user scrolls over them and disappear when they scroll out of view, similar to the behavior on this page. After some r ...

javascriptreactjsmaterial-uisurveyscrolltrigger

Is it possible to use a variable in JSX within a map function to modify inline CSS styles?

I have a map function that loops through an array and generates divs on the DOM for each color item. The array consists of hex values representing different colors (e.g. #1a703f). The goal is to set the background of each div to match the corresponding co ...

javascriptreactjsecmascript-6jsx

Find all elements with the same class and identify the first element among them using jQuery

In my dynamic data structure, I need to filter out all elements with the class name "My_data" and select the first one. In the code below, I am looking to retrieve the first element with the class "My_data". <div class="all_data"> <div class="lis ...

javascriptjqueryhtmljquery-selectorsjquery-filter

Vue dynamic class binding using computed properties

I've been attempting to pass a class from a parent component to a child component using a computed switch case within a slot. Parent: <template> <mcTooltip :elementType="'text'"><p>Test</p></mcTooltip&g ...

vue.jsvue-componentcomputed-properties

Wait for the scope value to become available before executing the directive or div

I have a unique directive created for SoundCloud that necessitates the SoundCloud URL. The URL is fetched from the database using the $http service, but the issue arises when the div for the directive is loaded before the URL value is defined. The code fo ...

javascriptjqueryangularjsasynchronous

Transform JSON into a JavaScript array object using node.js

My knowledge of Javascript is limited and I need assistance with a .json file that has the following structure: { "results": [ { "challenger": { "__type": "Pointer", "className": "Player", "objectId": "STWAxAHKay" }, "c ...

javascriptarraysjsonnode.js

Is there a way to retrieve the value of the object when the key is stored in a separate variable within a v-for

One query I have is about accessing data stored in Vuex and using v-for to loop through a list of object keys. How can I retrieve the data using mapGetters within the v-for loop? I've attempted passing the key into curly braces in the v-for loop as sh ...

vue.jsvuexv-for

What is the method for accessing 'this' beyond the scope of my object?

My Jcrop initialization for a website includes my own namespace. I have a question regarding the this keyword. Whenever I need to access my base object called "aps" in any callback function, I have to wrap this in a variable (I chose the word that). Is t ...

javascriptjquerythisfrontend

Exploring node.js: How to extract elements from a path

I have an array of individuals as shown below: individuals = ['personA', 'personB', 'personC']; I am looking to create a dynamic way to showcase each individual's page based on the URL. For instance, localhost:3000/indi ...

javascriptnode.js

Trying to configure and use two joysticks at the same time using touch events

I have been grappling with this problem for the past two days. My current project involves using an HTML5/JS game engine called ImpactJS, and I came across a helpful plugin designed to create joystick touch zones for mobile devices. The basic concept is th ...

javascripthtmlmulti-touchimpactjs

Is there a minimum height restriction for v-select in Vuetify.js?

Looking at the code snippet provided below, I am facing an issue while trying to decrease the height of a v-select element. It seems like there is a minimum limit set for the height, as reducing it beyond height = 40 doesn't have any effect. Is there ...

javascriptcssvue.jsvuejs2vuetify.js

Tips for accomplishing multiple event triggers and event recollection (benefits that combine features of events and promises)

What I Need Seeking an event system that meets my requirements due to the asynchronous nature of my applications. Specifically, I need the events to have the ability to fire multiple times and for listeners to immediately respond if an event has already b ...

javascriptangularjseventspromise

Is there a method to use media queries to dynamically switch JavaScript files based on the user's device?

I've been working on optimizing the mobile layout of my website, and while I have successfully implemented a media query with a different stylesheet for mobile devices, I'm struggling to determine if it's feasible to also load a separate Jav ...

javascriptcssmedia-queries

React - 'classProperties' is not currently activated in this setting

Recently, I incorporated Truncate-react into my project. Subsequently, React prompted me to install @babel/plugin-proposal-class-properties, which I promptly added to the package.json file as follows: "babel": { "presets": ...

javascriptreactjsbabeljs

The post feature is not delivering the object as expected

I have created a Login page that is supposed to post Username and Password using Axios. I wrapped the username and password into an object as shown in the code below, but when I submit the form, I receive a "201" response. Everything seems to be working fi ...

javascriptreactjsaxios