Привязка v-модели VueJs со скрытым компонентом не работает - PullRequest
Новая
       30

Привязка v-модели VueJs со скрытым компонентом не работает

0 голосов
/ 08 мая 2019

Я разрабатываю приложение SPA в Vue. У меня есть мастер в мастере У меня есть компонент для каждого шага. Все компоненты добавляются в начале, а их смонтированный и созданный метод / событие выполняется при запуске приложения.

Я использую шину событий, и когда я перехожу к следующему шагу мастера, я запускаю событие и ловлю событие на соответствующем шаге.

Примечание: Компонент скрыт в начале, и когда он показывает, у него не будет обновленных данных или даже данных в полях ввода.

Код компонента 2-го шага: 

<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 будет «Код загрузки» Но в обоих полях данных не будет.

Как я могу перепривязать, перерисовать или обновить данные?

Ответы [ 2 ]

0 голосов
/ 09 июня 2019

Вы можете просто добавить 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.

0 голосов
/ 09 июня 2019

Используйте 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 для вычисляемого свойства или свойства данных. Затем удалите логику, чтобы показать / скрыть ее из другой библиотеки.

...