Question 177099 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can v-model use a variable in Javascript?

I am using a textarea field in a form and if I insert a value from the database into it (using laravel 10 and inertia) it is not displayed.
However, it is displayed in any other place.
It is obvious that the value conflicts with in the v-model

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

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

At the same time, I cannot set the default value in the vmodel like this

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

The syntax of form.header is incorrect, and article.header is not defined.


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

article.header is not defined too

How could I pass the value of the variable to the texarea with v-model field

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is the answer. Need to declare variable to use it in script

    let props = defineProps({
  article: String,
});

let form = reactive({
  header: props.article.header,
});

  2. 0

    Try by removing {{ article.header }} from inside of textarea tag because mustache syntax inside textarea tag wont work. Docs:https://vuejs.org/guide/essentials/forms.html#multiline-text and also make changes suggested by @Joyful in the comments.

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

<template>
...
<textarea
v-model="form.header"                                
@input="onInputheader"                              
></textarea>
...
</template>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search