Question

我正在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标签时，将具有“载入代码” ，但是在两个字段中都没有数据。

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

Answer 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设置为计算或数据属性。然后从其他库中删除显示/隐藏的逻辑。

Answer 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。

具有隐藏组件的VueJ v模型绑定无法正常工作

2 个答案: