Vue实例该用一个还是两个？数据绑定问题求助

Hey there! The root cause of your problem is almost certainly that your slide-out panel lives outside the DOM element your first Vue instance is mounted on (#home). Vue only has control over the DOM tree inside its mounted element—any elements outside of that won’t be processed for data binding, even if you define the data in the instance.

Here are the best solutions to fix this, ordered by simplicity and best practice:

1. Move the slide panel inside your #home element #

If your HTML structure allows it, this is the quickest fix. Just adjust your markup so the slide panel is a child of the #home div. For example:

<div id="home">
  <!-- Your existing home content here -->
  <button @click="toggleSlidePanel">En savoir plus</button>
  
  <!-- Move the slide panel here -->
  <div class="slide-panel" v-if="isPanelOpen">
    <h2>{{ slideDetails.title }}</h2>
    <p>{{ slideDetails.description }}</p>
  </div>
</div>

Then update your Vue instance to add state for controlling the panel:

new Vue({
  el: '#home',
  data: {
    // Your existing home data
    slideDetails: {
      title: "My Project Details",
      description: "Lorem ipsum dolor sit amet..."
    },
    isPanelOpen: false
  },
  methods: {
    toggleSlidePanel() {
      this.isPanelOpen = !this.isPanelOpen;
    }
  }
});

This way, the panel falls within Vue’s managed DOM, so data binding will work as expected.

2. Mount your Vue instance on a higher parent element #

If moving the panel isn’t feasible (e.g., it’s in a separate section like a sidebar or footer), mount your Vue instance on a parent element that contains both #home and the slide panel. For example, if both are inside a #app wrapper:

<div id="app">
  <div id="home">
    <!-- Home content -->
    <button @click="toggleSlidePanel">En savoir plus</button>
  </div>
  
  <div class="slide-panel" v-if="isPanelOpen">
    <h2>{{ slideDetails.title }}</h2>
    <p>{{ slideDetails.description }}</p>
  </div>
</div>

Then update your Vue instance to target the higher parent:

new Vue({
  el: '#app',
  data: {
    // Include all data needed for both home and panel
    slideDetails: { /* Your panel data */ },
    isPanelOpen: false
  },
  methods: {
    toggleSlidePanel() {
      this.isPanelOpen = !this.isPanelOpen;
    }
  }
});

This gives Vue control over both sections, so data binding will work across both.

3. Create a reusable slide panel component #

For better code organization (especially if you plan to reuse this panel elsewhere), turn the slide panel into a Vue component. This is the most scalable approach:

First, define the component:

Vue.component('slide-panel', {
  props: ['details', 'isOpen'],
  template: `
    <div class="slide-panel" v-if="isOpen">
      <h2>{{ details.title }}</h2>
      <p>{{ details.description }}</p>
      <button @click="$emit('close')">Close</button>
    </div>
  `
});

Then use it in your main template (ensure it’s within the instance’s mounted element):

<div id="home">
  <!-- Home content -->
  <button @click="isPanelOpen = true">En savoir plus</button>
  
  <slide-panel 
    :details="slideDetails" 
    :is-open="isPanelOpen" 
    @close="isPanelOpen = false"
  ></slide-panel>
</div>

And update your main Vue instance:

new Vue({
  el: '#home',
  data: {
    slideDetails: { /* Your panel data */ },
    isPanelOpen: false
  }
});

This approach keeps your code modular and makes it easy to reuse the panel in other parts of your app.

Quick Troubleshooting Check #

Double-check that:

• The slide panel’s HTML uses Vue syntax (like {{ }} for interpolation) correctly.
• The data properties you’re referencing exist in the Vue instance that controls the panel’s DOM element.

Content of the question来源于stack exchange，提问作者Lucju04