VueJS中如何为输入框赋值？原生DOM赋值方法失效问题

Hey there! I get it—you tried using vanilla JavaScript's document.getElementById("address").value to set the value of your va-input after fetching API data, but it didn't work. That's a super common pitfall when working with Vue, so let's break down why this happens and fix it the right way.

Why Your Vanilla JS Approach Isn't Working #

Vue runs on a reactive data system that keeps your component data and the DOM in sync. When you directly manipulate the DOM (like setting .value via getElementById), you're skipping Vue's reactivity layer entirely. Vue has no clue you changed the DOM, so it won't sync that change back to your component's data, and the input won't update as expected.

The Correct Vue Way: Update the Bound Data Property #

Your va-input uses v-model="Address1", which creates a two-way binding between the input and the Address1 data property in your component. The fix is straightforward—just update the Address1 property directly when you get your API response.

Option 1: Options API (Vue 2 or Vue 3 with Options Style) #

First, make sure Address1 is declared in your component's data option:

export default {
  data() {
    return {
      Address1: '' // Initialize with empty string
    }
  },
  methods: {
    async fetchAddressData() {
      try {
        // Replace with your actual API call
        const res = await fetch('/your-api-endpoint');
        const data = await res.json();
        
        // Update the reactive data property
        this.Address1 = data[0].address1;
      } catch (error) {
        console.error('Failed to fetch address:', error);
      }
    }
  },
  mounted() {
    // Call the API when the component finishes mounting
    this.fetchAddressData();
  }
}

Option 2: Composition API (Vue 3) #

If you're using Vue 3's Composition API with setup(), use a ref to make Address1 reactive:

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const Address1 = ref(''); // Reactive reference to hold the address value

    const fetchAddressData = async () => {
      try {
        const res = await fetch('/your-api-endpoint');
        const data = await res.json();
        
        // Update the ref's value property (required for Composition API refs)
        Address1.value = data[0].address1;
      } catch (error) {
        console.error('Failed to fetch address:', error);
      }
    };

    onMounted(() => {
      fetchAddressData();
    });

    return { Address1 }; // Expose the reactive property to the template
  }
}

Key Takeaway #

Vue is built around data-driven views. Instead of manipulating the DOM directly, always update the reactive data properties tied to your components. Vue will automatically handle updating the DOM for you, keeping your data and UI in perfect sync.

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