Using the drag and drop feature with the v-textarea component in Vuetify

Struggling to incorporate a Drag and Drop feature on vuetify v-textarea. Encountering an issue where clicking on the v-textarea results in the value from a dropped component being removed. Unsure if it's a flaw in my code or a limitation in vuetify v-textarea's functionality. A snippet of the code is provided below;

TEMPLATE

<v-textarea outlined dense @drop="drop($event)" @dragover="allowDrop($event)" placeholder="Paragraph" v-model="_paragraph"/>


<v-btn outlined dense color="#0057AD" draggable="true" @dragstart="drag($event)" :value="'{{date}}'">Date</v-btn>
        

SCRIPT

    /*
    * To capture the value from the dragged element
    *
    * @return void
    */
    drag(event){ event.dataTransfer.setData("text", event.target.value); },

    /*
    * To transfer the value from the dragged element into an object 
    *
    * @return void
    */
    drop(event){ 
        event.target.value += event.dataTransfer.getData("text");
        this.setText(event.target.value);
    },
    
    /*
    * To prevent certain actions when dropping a value
    *
    * @return void
    */
    allowDrop(event){ event.preventDefault() },

Appreciate any help in advance

Answer №1

Don't forget to make sure you update the _paragraph variable in the drop() method.

drop(event){ 
  event.target.value += event.dataTransfer.getData("text");
  this.setText(event.target.value);
  this._paragraph = event.target.value; // Make sure to update the value of _paragraph.
}

Check out this working demo for reference.

Additionally, remember that prefixing your paragraph variable with an underscore might cause an error as they are reserved for Vue's internal properties. You can still access it using $data._paragraph, but it's recommended to just remove the underscore completely for a cleaner code.

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

Combining the powers of $.get and $.ready

Basically, I am facing an issue with my ajax call where sometimes it completes before the page is fully loaded. I attempted to use $( fn ) to wrap the callback function, but unfortunately, the callback does not trigger if the page is already loaded. Does a ...

The problem of having an undefined state in Vuex arises

https://i.stack.imgur.com/52fBK.png https://i.stack.imgur.com/GcJYH.jpg There is an error occurring: TypeError: Cannot read property 'state' of undefined ...

Angular code causing an unexpected blank page to be printed again

Trying to display the content of my HTML page is proving to be a challenge. I've been utilizing angularPrint, but an issue persists in the form of a second blank page appearing in the preview alongside the actual content. Eliminating this unwanted sec ...

How to iterate through two objects simultaneously using a directive in Angular and Vue.js

I am facing a challenge with creating an Angular directive that can iterate over a data object and display its values along with the values of a second unrelated object with similar structure. Currently, I am developing a translation app where the origina ...

"Beginner's guide to utilizing JQuery and AJAX with PHP

I am struggling to grasp the concept of using AJAX and jQuery to post data without reloading the page. Specifically, I am facing issues with the form reloading the page and not updating variables. Here is the code I have been working on: Initially, I was ...

The Visual Studio Code extension for Vue / Volar is constantly crashing, with the JS/TS language service crashing a total of 5 times in a row

After spending a whole day troubleshooting this issue, I decided to document it in case anyone else is facing the same problem. When I opened a vue 3 project, I encountered the following error message: The JS/TS language service crashed multiple times a ...

Entering a value into an HTML textbox using Awesomium in VB.NET

This code snippet is used to split text from a listbox: For Each Item As Object In ListBox1.SelectedItems TextBox2.AppendText(Item.ToString + Environment.NewLine) Next Dim str As String = TextBox2.Text D ...

Why do Material UI components fail to render in jsdom while using Jest?

During my UI testing using Jest/React Testing Library, I encountered a peculiar issue. In one of my components, the return statement is structured as follows: const sidebarContentUp = ( <Drawer anchor="left" onClose={onMobileC ...

What is the impact of Javascript variable scope in the context of "for...in..." loops?

Imagine you have a code snippet like this: dict = {"key":"elem"} for (var elem in dict){ someFunction(function(){ anotherFunction(dict[elem]); }) } Question: Is elem still considered as the temporary variable created in the for...in... s ...

Tips for efficiently rendering components in NextJS 13 exclusively on the client side

Currently, I find myself working on a project that demands my components to adjust to constantly changing conditions on the client side. However, it appears that NextJS 13 is leaning towards server-side rendering from what I can gather. I attempted dynamic ...

Additional unnecessary event listeners (deleteComponent) were provided to the component but could not be inherited automatically

Dear community, I am facing an issue with emitting events from my child component to the parent. Strangely, all other components work perfectly fine with the same code except for this particular one. Let me provide you with the relevant code snippets: Ch ...

Issues with Bootstrap 4 (possibly JQuery) - mobile menu navigation items are unresponsive

I've encountered an issue with my Bootstrap4 navbar on mobile screens where the links in the menu don't seem to work. Below is the code I used: <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28"> < ...

Tips for shortening extra text in a non-wrapping HTML table cell and adding "..." at the end

My HTML template includes text imported from a database field into a <td> tag. The length of the text can range from 3 to 200 characters, and the <td> spans 100% of the screen width. If the text surpasses the width of the screen, I want it to b ...

Implement a function that attaches an event listener to generate a new table row dynamically

I am currently facing an issue with my table that has ajax call functionality to add rows within the tbody element. The table is already set up on the html page. <table id='mytable'> <thead> <tr> <th>First Col</th> & ...

Incorporate a unique identifier $id within the ajax request

Whenever I make changes to my product, I would like the categories to show up in a dropdown menu. Currently, it only displays: -- Select your category -- For instance, if my $current_category_id = 2, I want the dropdown to show the relevant categories. ...

The content of xmlhttp.responseText is not being displayed in the innerHTML

As part of my ongoing effort to enhance my understanding of Ajax for work purposes, I have been following the W3Schools tutorial and experimenting with my Apache2 server. In this process, I have placed a file named ajax_info.txt on the server (in /var/www ...

Reducing the slide margins in impress.js?

When using Impress.js, I noticed that the default slides have a large left margin (or padding - it's hard to determine with Firefox's Inspector). I have a slide with a wide <pre> block that would fit if it were aligned to the left, but it d ...

"Encountering a problem with ThreeJs graphics rendering

I recently developed an application using ThreeJs, but I encountered a strange issue. After rendering the 3D graphics, the window appears blank. However, when I click on full screen or adjust the window size, the output becomes visible. Check out Screen s ...

Utilizing an external type definition in JSDoc @typedef

I'm encountering an issue with reducing redundancy when defining my imported types. I am trying to streamline the process, but unfortunately I am running into errors. /** @typedef {import("../types/util")} util @typedef {util.mapBehaviors} m ...

Tips for distinguishing between elements in React

I am facing an issue with zooming images on mouse hover using CSS. I have a code snippet that works well, but it zooms both images simultaneously. How can I differentiate between mouse movements over different elements in ReactJS? Here is the code: .styl ...