带有隐藏组件的 VueJs v-Model 绑定不起作用答案

【问题标题】：VueJs v-Model Binding with Hidden Component not working带有隐藏组件的 VueJs v-Model 绑定不起作用
【发布时间】：2019-09-26 15:24:12
【问题描述】：

我正在用 Vue 开发一个 SPA 应用程序。我在向导中有一个向导，每个步骤都有一个组件。所有组件都在开始时添加，并且它们的挂载和创建的方法/事件在应用程序启动时执行。

我正在使用事件总线，当我进入向导的下一步时，我会发出事件并在相应的步骤中捕获事件。

注意：组件在开始时是隐藏的，当它显示时，它不会有更新的数据，甚至输入字段中的数据。

第二步的组件代码是

<template>
  <section>
    <div class="container">

      <form class="form-horizontal">
        <div class="row form-group">
          <label class="col-sm-3 control-label" for="marshaCode">MARSHA Code:</label>
          <div class="col-sm-4">
            <input type="text" class="form-control field-ml-15" v-model="marshaCode" placeholder="Enter Marsha Code" readonly />
            <input type="text" class="form-control field-ml-15":value="marshaCode" placeholder="Enter Marsha Code" readonly />
            <p>{{marshaCode}}</p>
          </div>
        </div>
      </form>
    </div>
  </section>
</template>


<script>
  import { EventBus } from "../../shared/eventbus.js";

  export default {
    data() {
      return {
        marshaCode:"On Load Code"
      }
    },
    mounted() {
      EventBus.$on('showSurvey', () => {
        this.marshaCode="On Show Code"
      });
    },
  }
</script>

现在当这个组件显示时，P 标签将有 "On Load Code" 但是在这两个字段中都没有数据。

如何重新绑定、重新渲染或更新数据？

【问题讨论】：

如何显示/隐藏组件？
@AhmadMobaraki 我正在使用以下 Jquery 插件。每个组件都是 jquery 插件的一个步骤。当应用程序启动并且第一步可见时，会在开始时添加步骤。 jquery-steps.com/Documentation

标签： vue.js vuejs2 vue-component vuex vue-router

【解决方案1】：

使用vue 显示/隐藏使用v-if 或v-show 的组件。如果另一个库在弄乱 DOM，它就无法完成它的工作。

  <section v-if='showMyComponent'>

或

<div class="col-sm-4" v-if='showMyComponent'>
            <input type="text" class="form-control field-ml-15" v-model="marshaCode" placeholder="Enter Marsha Code" readonly />
            <input type="text" class="form-control field-ml-15":value="marshaCode" placeholder="Enter Marsha Code" readonly />
            <p>{{marshaCode}}</p>
          </div>

并将showMyComponent 设置为计算属性或数据属性。然后从您的其他库中删除逻辑以显示/隐藏。

【讨论】：

【解决方案2】：

您可以在挂载时简单地添加this.marshaCode="On Show Code"。

mounted() {
  this.marshaCode="On Show Code"
  console.log(EventBus)
  EventBus.$on('showSurvey', () => {
    this.marshaCode="On Show Code"
  });
}

一个例子：https://codesandbox.io/embed/vue-template-8l2lg。

【讨论】：