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

What is the best way to save a JavaScript object or JSON within an HTML element using the HTML5 data attribute?

I have an anchor element and I want to store and retrieve the object within it in this specific format. <a id ="test" data-val="{key1:val1,key1:val1}"> </a> When saved in this manner, fetching it with $("#test").data('val') returns ...

javascriptjqueryjsonhtml

Having trouble getting Vue 3 integration to work properly in Laravel 9 tutorial

Having previously worked on projects using Laravel, I decided to try integrating Vue.js for the front end of my latest project. In search of tutorials on how to seamlessly blend Vue.js with Laravel, I experimented with multiple guides. However, I will focu ...

laravelvue.jsvite

Vue component not reflecting updated value from axios response

I am struggling to update the temp object after making an axios call. Any assistance would be greatly appreciated. This is the entire code snippet. I have implemented this component in a Vue application. Vue and components are new to me, so any guidance ...

vue.jsaxios

JavaScript - The onkeypress event continuously adds text to the end

In my Angular application, I have implemented an input field with the onkeypress event handler to automatically remove any commas entered by the user: <input name="option" ng-model="main.optionToAdd" onkeypress="this.value = this.value.replace(/,/g ...

javascriptangularjs

Transforming into a serialized division

I am working on creating a custom WISYWIG editor that generates a div with specific inner elements. The goal is to design the div (along with its inner structure), serialize it, store it in a database as a string or JSON format, and later insert it into th ...

javascripthtml

What is the process of retrieving an image file in a Java post API when it is being transmitted as form data through Jquery?

I have encountered an issue with fetching file data in my POST API when utilizing three input file fields in JavaScript. The values are being sent using formdata in jQuery upon clicking the submit button, but I am experiencing difficulties in retrieving th ...

javascriptjavajqueryajax

Simultaneously sending jQuery.ajax data while submitting a form

I'm facing a bit of a dilemma here. I have a form with multiple fields, including one for entering links. When you input a link and click the add button, the link is added to a link_array using jQuery. My goal is to send this array through the jQuery. ...

phpjavascriptjqueryhtmlajax

Prevent text from wrapping when using jQuery to animate font size

I have a unique way of showcasing content in a preview format by utilizing em units for scaling and adjusting the root font size to increase or decrease. When users click on the preview, the full content is revealed with an animation that scales the font s ...

javascriptjqueryhtmlcss

The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using jQuery $(document).ready(function() { $(".chosen").chosen({}); ...

javascriptjqueryhtmlcssjquery-chosen

How can I incorporate popups in React using mapbox-gl?

Currently utilizing mapbox-gl within React, everything seems to be functioning properly except for the integration of mapbox-gl's Popups. I have the function let Popup, but I am uncertain about how to incorporate it. renderMap() { if (this.props. ...

javascriptreactjsmapboxmapbox-gl

What is the best way to send multiple input box values to a function set in the controller?

I am attempting to send the values of two input boxes to a single controller function. <div class="container" ng-controller="MainCtrl"> <div class="row"> <div class="col-lg-6"> <input type="text" ...

javascriptangularjs

My type is slipping away with Typescript and text conversion to lowercase

Here is a simplified version of the issue I'm facing: const demo = { aaa: 'aaa', bbb: 'bbb', } const input = 'AAA' console.log(demo[input.toLowerCase()]) Playground While plain JS works fine by converting &apo ...

javascripttypescript

What is the process for running .js files on my browser from my local machine?

Hi there! I'm trying to figure out how I can create a JavaScript game in TextMate on my Mac. I want to have a regular .js file, then open it and run it in Chrome so that whatever I have coded - for example, "Hello World!" - will display in the browser ...

javascriptgoogle-chrome

Adjust the text size of a label in material-ui

Hey everyone, I'm struggling with something here. I need to adjust the font size of the label that goes along with my textfield. So far, I've only been able to change the font size of the input itself and not the label. Here's the code for ...

javascriptreactjsmaterial-ui

What is the best way to upload my React project to GitHub without adding the node modules directory?

I'm looking to share my React Project on GitHub, but I don't want to include the node modules folder. What's the best way to go about this? ...

javascriptreactjsgitgithubnpm

No errors encountered during compilation for undefined interface object types

Hey there, I'm currently exploring the Vue composition API along with Typescript. I'm facing an issue where I am not receiving any errors when an interface does not align with the specified types for that interface. Although my IDE provides aut ...

typescriptvue.jsvuejs3type-hintingvue-composition-api

End of container Bootstrap 4 row with two columns at the edge

I'm currently working on an angular project with bootstrap 4. Within the container, there are two rows. I specifically want one row to always be positioned at the bottom of the container. Despite trying methods like justify-content: flex-end;, botto ...

javascriptcssangulartwitter-bootstrapbootstrap-4

Handling multiple Ajax requests while refreshing events in fullcalendar.io

Whenever I try to refetch events from fullcalendar after making an ajax request to insert the event, the ajax request ends up executing multiple times. This results in duplicate or even more entries of the same event in the database. Can someone explain ...

javascriptjqueryajaxfullcalendar

What is the best way to retrieve the values of "qty" and "price" and access them within the item [array] without knowing the IDs?

I am currently working on a shopping cart project, specifically on the "previous orders" page to display order details. My goal is to output this information in an (.ejs) file. The data structure includes nested objects, and within one object, propertie ...

javascripthtmljquerynode.jsejs

In JavaScript, ensure to directly use the value of a variable when defining an asynchronous function, rather than by reference

Hello there, Let me paint you a picture: for (j = 0; j < btnArr.length; j++) { var btn = document.createElement("button"); btn.addEventListener("click", function() { press(this, j) }, false); div.appendChild(btn); } The issue at hand is t ...

javascriptvariablesevents