如何在Laravel10中以隐藏字段传递Vue.js v-model值？

问题根源 #

1. 原代码中隐藏字段放在了Vue挂载容器#number_vm外部，不在Vue实例的作用域内，无法绑定Vue数据。
2. 子组件number_vm01-component内部的n1是组件私有数据，父实例无法直接访问，必须通过事件传递。

正确实现方式 #

方案一：子组件通过自定义事件传递数据（通用Vue版本）

1. 修改子组件 Number_vm.vue：

<template>
  <input v-model.number="n1" @input="$emit('n1-updated', n1)" /> {{ n1 }}
</template>

<script>
export default {
  data() {
    return {
      n1: 0
    }
  }
}
</script>

2. 修改 index.blade.php：

<div id="number_vm">
  <!-- 监听子组件事件，接收数据 -->
  <number_vm01-component @n1-updated="parentN1 = $event"></number_vm01-component>
  <!-- 隐藏字段放在Vue容器内，用v-model绑定父实例数据 -->
  <input type="hidden" v-model="parentN1" name="n1">
</div>

<script>
new Vue({
  el: '#number_vm',
  components: {
    number_vm01Component: () => import('./Number_vm.vue')
  },
  data() {
    return {
      parentN1: 0
    }
  }
})
</script>

方案二：使用Vue自定义v-model语法糖（Vue 2.3+）

这种方式更简洁，符合Vue的v-model设计规范：

1. 修改子组件 Number_vm.vue：

<template>
  <input v-model.number="localN1" /> {{ localN1 }}
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  computed: {
    localN1: {
      get() {
        return this.value;
      },
      set(val) {
        // 触发input事件，父组件可通过v-model接收
        this.$emit('input', val);
      }
    }
  }
}
</script>

2. 修改 index.blade.php：

<div id="number_vm">
  <!-- 直接用v-model绑定父实例数据 -->
  <number_vm01-component v-model="parentN1"></number_vm01-component>
  <input type="hidden" v-model="parentN1" name="n1">
</div>

<script>
new Vue({
  el: '#number_vm',
  components: {
    number_vm01Component: () => import('./Number_vm.vue')
  },
  data() {
    return {
      parentN1: 0
    }
  }
})
</script>

针对你更新后代码的修正

如果是单文件组件内的普通输入框+隐藏字段，确保隐藏字段用响应式绑定：

<template>
  <div>
    <input :value="text" @input="onInput" placeholder="Type here" />
    <!-- 用:value绑定Vue数据，而非Blade插值 -->
    <input type="hidden" :value="text" name="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      this.text = e.target.value;
    }
  }
}
</script>

关键注意事项 #

• 所有需要Vue绑定的元素必须放在Vue挂载的容器内部，否则无法响应数据变化。
• 子组件私有数据必须通过事件传递给父实例，不能直接跨组件访问。
• 隐藏字段需使用Vue的:value或v-model绑定，不能用Laravel Blade的{{}}插值（Blade是服务器端渲染，无法随Vue数据更新）。

内容的提问来源于stack exchange，提问作者bluetail