Using v-model with variables in Vue

In my form, I am encountering an issue with a textarea field when inserting a value from the database (using Laravel 10 and Inertia) where it is not being displayed. However, in other instances, the value appears as expected. It seems that there is a conflict within the v-model regarding this particular value.

<script setup>
...
let form = reactive({
  header: '',
});  
...
</script>

<template>
...
<textarea
v-model="form.header"                                
@input="onInputheader"                              
>{{ article.header }}</textarea>
...
</template>

Attempting to set a default value in the v-model like shown below also presents challenges:

<script>
 data() {
    return {
      form.header: article.header,
}

The syntax used for form.header is incorrect, while the reference to article.header is not defined.


</script>.
let form = reactive({
  header: article.header,
}); 

Moreover, article.header remains undefined.

I am seeking guidance on how to successfully pass the variable value to the textarea using the v-model attribute.

Answer №1

To ensure proper functionality, it is recommended to eliminate the usage of {{ article.header }} within the textarea tag, as Mustache syntax does not function within this tag. You can refer to the documentation for more details: https://vuejs.org/guide/essentials/forms.html#multiline-text. Additionally, incorporate the modifications advised by @Joyful in the comments section.

<script setup>
...
let form = reactive({
  header: '',
});  
...
</script>

<template>
...
<textarea
v-model="form.header"                                
@input="onInputheader"                              
></textarea>
...
</template>

Answer №2

Here lies the solution. Make sure to define a variable in order to employ it within the script

const properties = defineProperties({
  post: String,
});

const formDetails = reactive({
  heading: properties.post.heading,
});

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

Guide on Triggering a Custom Popup Message upon a Server Action in Next.js

Hey there, I'm currently facing some difficulties in finding the proper way to trigger a toast notification after successfully mutating data using server actions in Nextjs 13. The toast component I'm working with is specifically designed for clie ...

Switch up the font style of the title element

Is it possible to modify the font-family of the title attribute in an input field using either JavaScript or jQuery? <input type="text" title="Enter Your Name" id="txtName" /> ...

Adobe Acrobat does not run JavaScript code in documents that are submitted for electronic signatures

Lately, I have been experiencing issues with pdfs that contain embedded javascript. The strange thing is that the javascript functions perfectly in the Acrobat Pro DC app but fails to execute when the document is sent for signature. To troubleshoot, I cre ...

In Google Chrome, the edges of hexagons appear jagged and not smooth

I have encountered an issue in Chrome where I created a hexagon group using HTML and CSS. While it displays fine in Firefox, the edges of the hexagons appear distorted in Chrome. Here are my code snippets: HTML <div class="col-sm-12 margin-left-100" i ...

Having difficulty automatically populating a textarea with the chosen option from a datalist

Is there a way to automatically populate the Address field of a client in a textarea based on the input of the client's name in an input field? I have created a 'for loop' to retrieve a datalist of client names. For the address, I retrieved ...

Why am I getting the error in react-dom.development.js related to my index.js file?

Upon checking the console, the following message is displayed: react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Please use createRoot instead. Until you transition to the new API, your application will behave as if i ...

The operation of moveImage does not exist

Currently, I am attempting to incorporate setInterval with my moveImage function in order to modify the position of an image. Here is a snippet of my code: <template> <div class="randImg"> <img v-bind:style="{top: imgTop + 'px&ap ...

Post-installation of NPM, configuring CA certificates on Windows system

TLDR; Is there a way to seamlessly set NODE_EXTRA_CA_CERTS in a Windows environment for NPM packages' post-install scripts without requiring system changes, configuration file modifications, or admin-level permissions? Details This issue has been f ...

Creating JEST unit tests for a basic functionality

Here is the React code I have written: getDetails: function () { var apiUrl = ConfigStore.get('api') request .get(apiUrl) .set('X-Auth-Token', AuthStore.jwt) .set('Accept&apo ...

Is there a way to adjust the image opacity of a background using Material UI?

Is there a way to adjust the opacity of a background image using Material UI? I attempted to achieve this by utilizing the makeStyles hook in Material UI. Here is an example of my code: import React from 'react'; import {Box,Typography } from &ap ...

Using MUI Select with Array of Objects for values - Learn how to deselect a predefined state

I have a list of objects structured like this: [ { _id: "6311c197ec3dc8c083d6b632", name: "Safety" }, ........ ]; These objects are loaded as Menu Items options for my Select component: {categoryData && c ...

How can I modify the dot colors on a graph using chart.js?

Need assistance with changing the color of graph data points https://i.sstatic.net/QGJBv.png Here is my JavaScript code snippet I have successfully created a graph using chart.js. However, I now want to differentiate data points by displaying different c ...

It is not possible to retrieve a cookie via a request

Currently, I am in the process of setting up an Express JS server that uses cookies. This is my first time incorporating cookies into a project :) Upon user login, I send cookies to them using the following code: res.cookie('pseudo', list[i].ps ...

automatically created button, form control named 'answer' that is not valid

Struggling with a challenge in attaching an event to a dynamically generated button. Despite conducting some research, most of the solutions suggest that this issue is typically related to a form control. However, in my scenario, the error "invalid form co ...

Press the button using the spacebar

I am facing an issue where I have a button with an anchor element that I need to trigger with the spacebar key for accessibility purposes. However, instead of triggering the button, pressing the spacebar causes the page to jump down when the button is in f ...

Explore a JSON array within another JSON array

Here is a JSON format that I have: { "Project [id=1, dateDebut=2017-01-13, dateFin=2017-01-18, description=qsd, sponsor=qsd ]" : [ {"id":1,"title":"qsd ","description":"qsdqsd","dateFin":"2017-01-26"}, {"id":2,"title":"sss ","descriptio ...

Trigger modal on designated ID

My code includes a script that assigns a specific id to a button using a variable $i in a for loop: <button id='myBtn$i'>Open Modal</button>. This id should allow me to open specific modals with the corresponding $i value: <div id= ...

Accessing child value in parent component using React.js

In my project, I have a main Component called [MainLayout] which contains a child component called [ListItems]. The [ListItems] component further has multiple children components called [ListItem]. I am trying to figure out how to extract the value of the ...

Is optgroup malfunctioning in IE 10?

My main question is: does optgroup not function properly in IE? The Plnkr code works fine in Chrome but encounters issues in IE 10. I'm trying to find a solution that will work across both browsers. Is this a known problem? In Chrome, I can expand/co ...

Maintain course focus when updating

I'm currently working on a to-do list where clicking on an item adds the "checked" class. However, when I refresh the page, everything reverts back to its original state without the checked class. How can I maintain the state of the checked items? I& ...