Vue v-model结合Laravel 10与Inertia：textarea无法显示数据库值求助

在使用Laravel 10和Inertia开发时，遇到textarea通过v-model绑定表单数据后，无法显示从数据库获取的初始值的问题：直接在textarea标签内写入{{ article.header }}会和v-model冲突，且初始化表单时无法正确赋值article.header，提示变量未定义。

错误代码示例 #

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

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

初始化时的错误尝试 #

1. 语法错误且article.header未定义：

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

2. 提示article.header未定义：

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

正确实现步骤 #

1. 接收Inertia传递的Props
   在<script setup>中，必须通过defineProps接收后端传递的article数据，否则无法直接访问article变量。

2. 初始化表单时赋值初始值
   将props.article.header直接赋给form.header，作为v-model的初始值。

3. 移除textarea标签内的插值语法
   v-model会完全控制textarea的内容，标签内的插值内容会被忽略，因此无需保留。

完整正确代码 #

<script setup>
import { reactive } from 'vue';

// 接收后端传递的article props
const props = defineProps({
  article: {
    type: Object,
    required: true
  }
});

// 初始化表单并设置初始值
let form = reactive({
  header: props.article.header || '', // 用||处理可能的空值
});  

// 输入事件处理函数
const onInputheader = () => {
  // 这里编写输入逻辑
};
</script>

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

关键说明 #

• v-model优先级：v-model是value属性和input事件的语法糖，会完全覆盖textarea标签内的内容，因此标签内的插值写法无效。
• Props访问规则：Inertia传递给前端组件的数据必须通过defineProps声明接收，在<script setup>中需通过props.xxx访问，不能直接使用变量名。
• 选项式API替代写法
  如果使用Vue选项式API，需先在props中声明article，再初始化表单：

<script>
export default {
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form: {
        header: this.article.header || ''
      }
    }
  },
  methods: {
    onInputheader() {
      // 输入逻辑
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Марк Мина