Vue.js表单提交时绑定数据未随POST请求发送的问题咨询

Let’s break down the two issues you’re facing and how to fix them:

1. Disabled Inputs Aren’t Included in Form Submissions #

This is standard HTML behavior—browsers automatically exclude any form elements with the disabled attribute when submitting a form. That’s why your ontology-version data isn’t showing up in the POST request.

Solutions to Submit the Value: #

Option A: Add a Hidden Input for Submission

Keep the disabled input for display purposes, and add a hidden input with the same name to send the data along with the form:

<div class="form-group">
  <label class="form-label" for="field_description">Ontology Version</label>
  <!-- Disabled input for user display -->
  <input type="text" class="form-control" disabled :value="ontology">
  <!-- Hidden input to submit the value -->
  <input type="hidden" name="ontology-version" :value="ontology">
</div>

Option B: Use readonly Instead of disabled

If you just need to prevent user editing but don’t require the "grayed out" visual state, switch to the readonly attribute. Readonly fields are still included in form submissions:

<div class="form-group">
  <label class="form-label" for="field_description">Ontology Version</label>
  <input type="text" name="ontology-version" class="form-control" readonly :value="ontology">
</div>

2. Input Doesn’t Show a Value in Chrome Dev Tools #

This suggests your ontology data property might not be properly initialized or populated in your Vue component. Double-check these points:

• Make sure ontology is declared in your component’s data option (or as a reactive variable if using Vue 3’s Composition API).
• Verify that ontology has a valid value (not undefined or null) when the component renders.

Example of initializing ontology in Vue 2:

export default {
  data() {
    return {
      ontology: "" // Initialize with a default value, or set it from an API/prop
    };
  },
  // ... other component logic
};

In Vue 3 Composition API:

import { ref } from 'vue';

export default {
  setup() {
    const ontology = ref(""); // Initialize with a default value
    // ... fetch data and assign to ontology.value later
    return { ontology };
  }
};

Once ontology holds a valid value, the :value binding will populate the input, and it will show up in Chrome’s dev tools.

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