Данные, потерянные на динамическом компоненте vue при возврате к родительскому компоненту - PullRequest
Новая
       61

Данные, потерянные на динамическом компоненте vue при возврате к родительскому компоненту

0 голосов
/ 25 января 2019

Я использую Vue-form-wizard для создания многошаговой формы.на одном из шагов я загружаю динамический компонент и передаю данные с помощью v-bind и props динамическому компоненту.данные префектно обновляются, когда мы находимся на динамическом компоненте, но когда я перехожу к следующему шагу, все изменения теряются и по умолчанию остаются в родительском компоненте!Я пытался, но это ничего не делает.Вот пример того, что происходит: HTML: 

<div id="app">
<div>
  <form-wizard @on-complete="onComplete">
    <tab-content v-for="tab in tabs"
                v-if="!tab.hide"
                :key="tab.title"
                :title="tab.title"
                :icon="tab.icon">
      <component :is="tab.component" v-bind={'form':form}></component>
    </tab-content>
  </form-wizard>
 </div>
</div>

и JS будет: 

Vue.use(VueFormWizard)
Vue.component('step1', {
 template:` <div> My first tab content <br>
             </div>`,
 props:['form'],
 created(){
            this.form = 'that other form'; 
      alert(this.form);
 }
 }
)
Vue.component('step2', {
 template:`<div>  My second tab content </div>`
})
Vue.component('step3', {
 template:`<div>  My third tab content </div>`
})
Vue.component('step4', {
template:`<div> Yuhuuu! This seems pretty damn simple </div>`
})
new Vue({
 el: '#app',
 data() {
    return {
  form:'this form',
    tabs: [{title: 'Personal details', icon: 'ti-user', component: 'step1'}, 
    {title: 'Is Logged In?', icon: 'ti-settings', component: 'step2', hide: false}, 
    {title: 'Additional Info', icon: 'ti-location-pin', component: 'step3'},
    {title: 'Last step', icon: 'ti-check', component: 'step4'},
    ],
  }
 },
 methods: {
  onComplete: function(){
      alert(this.form);
   }
  }
})

, пожалуйста, помогите мне.большое спасибо

1 Ответ

0 голосов
/ 25 января 2019

Здесь: 

 props:['form'],
 created(){
      this.form = 'that other form'; 
      alert(this.form);
 }

Вы меняете опору. Не делайте этого .

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

Вместо этого дочерний компонент должен генерировать событие, на которое воздействует родительский элемент для обновления элемента данных.Мне нравится создавать computed in child, чтобы обернуть это поведение, чтобы я мог рассматривать его как переменную, которую я могу назначить.

В приведенном ниже фрагменте я использую модификатор .sync чтобы сделать обновление чистым.Я также вызываю $nextTick после установки значения, чтобы указать время обработки события. 

Vue.use(VueFormWizard)
Vue.component('step1', {
  template: ` <div> My first tab content <br>
             </div>`,
  props: ['form'],
  computed: {
    proxyForm: {
      get() {
        return this.form;
      },
      set(v) {
        this.$emit('update:form', v);
      }
    }
  },
  created() {
    this.proxyForm = 'that other form';
    this.$nextTick(() =>
      alert(this.proxyForm));
  }
})
Vue.component('step2', {
  template: `<div>  My second tab content </div>`
})
Vue.component('step3', {
  template: `<div>  My third tab content </div>`
})
Vue.component('step4', {
  template: `<div> Yuhuuu! This seems pretty damn simple </div>`
})
new Vue({
  el: '#app',
  data() {
    return {
      form: 'this form',
      tabs: [{
          title: 'Personal details',
          icon: 'ti-user',
          component: 'step1'
        },
        {
          title: 'Is Logged In?',
          icon: 'ti-settings',
          component: 'step2',
          hide: false
        },
        {
          title: 'Additional Info',
          icon: 'ti-location-pin',
          component: 'step3'
        },
        {
          title: 'Last step',
          icon: 'ti-check',
          component: 'step4'
        },
      ],
    }
  },
  methods: {
    onComplete: function() {
      alert(this.form);
    }
  }
});
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-form-wizard@0.8.4/dist/vue-form-wizard.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-form-wizard@0.8.4/dist/vue-form-wizard.min.css" rel="stylesheet" />
<div id="app">
  <div>
    <form-wizard @on-complete="onComplete">
      <tab-content v-for="tab in tabs" v-if="!tab.hide" :key="tab.title" :title="tab.title" :icon="tab.icon">
        <component :is="tab.component" :form.sync="form"></component>
      </tab-content>
    </form-wizard>
  </div>
</div>
...