时间戳

首页 > 解决方案 > 在 Vue 中将道具从一个步骤传递到另一个步骤（步进器）

javascript - 在 Vue 中将道具从一个步骤传递到另一个步骤（步进器）

问题描述

我在 vue 中使用步进器。我在第 1 步创建代理，在第 2 步显示代理详细信息。问题是代理详细信息不会出现在第 2 步中，直到我在执行第 2 步后刷新页面。有没有办法将代理作为道具从 agent.vue 传递给 event.vue，这样我就不需要刷新页面以使代理详细信息显示在步骤 2 中。

步进器.vue

<template>
    <div >
      <v-stepper v-model="e1">
        <v-stepper-header>
          <v-stepper-step :complete="e1 > 1" step="1">Agency</v-stepper-step>

          <v-divider></v-divider>

          <v-stepper-step :complete="e1 > 2" step="2">Event</v-stepper-step>

          <v-divider></v-divider>
        </v-stepper-header>

        <v-stepper-items>
          <v-stepper-content step="1">
            <Agency @next="goTo(2, true)"></Agency>
          </v-stepper-content>

          <v-stepper-content step="2">
            <Event/>
          </v-stepper-content>
        </v-stepper-items>
      </v-stepper>
    </div>
</template>

<script>
import Agency from 'parties/agency';
import Event from 'events/event';

export default {
  components: {
    Agency,
    Event
  },
  data () {
    return {
      e1: 0,
      agency: {
        id: '',
        name: '',
        phone_number: ''
      }
    }
  },
  created() {
    this.step = 1;
    this.getAgency();
  },
  methods: {    
    getAgency() {
      this.$axios.get('/agency.json')
      .then(response => {
        if (Object.keys(response.data).length > 0) {
          this.agency = response.data;
        }
      })
    },
    goTo(step, can) {
      if (can) {
        this.e1 = step;
      }
    },
  }
};
</script>

代理.vue

<template>
  <v-card>
    <v-form :model='agency'>     
      <v-layout row wrap>
        <v-flex xs12 sm12 lg12 >
          <v-layout row wrap>
            <v-flex xs12 md6 class="add-col-padding-right">
              <v-text-field
                label='Agency Name'
                v-model='agency.name'>
              </v-text-field>
            </v-flex>
          </v-layout>
          <v-layout row wrap>
            <v-flex xs12 md6 class="add-col-padding-right">
              <v-text-field
                label='Agency Phone Number'
                v-model='agency.phone_number'>
              </v-text-field>
            </v-flex>
          </v-layout>
          <v-layout row wrap>
            <div>
              <v-btn @click.prevent='saveAgency'>Save</v-btn>
            </div>
          </v-layout>
        </v-flex>
      </v-layout>           
    </v-form>
    <v-btn @click.prevent='nextStep'>
     Next
    </v-btn>
  </v-card>
</template>

<script>

export default {

  data: function () {
    return {
      agency: {
        id: '',
        name: '',
        phone_number: ''
      }
    };
  },
  created: function() {
    this.getAgency();
  },
  methods: {
    nextStep() {
     this.$emit('next');
    },
    getAgency() {
      this.$axios.get('/agency.json')
      .then(response => {
        if (Object.keys(response.data).length > 0) {
          this.agency = response.data;          
        }
      })
    },
    saveAgency() {
      this.$axios.post('/agencies.json', { agency: this.agency })
      .then(response => {
      });           
    },    
  }
};
</script>

事件.vue

<template>
  <v-card class="mb-12">

    <v-form :model='agency'>
      {{ agency.name }}<br/>
      {{ agency.phone_number }}<br/>          
    </v-form>
  </v-card>
</template>

<script>

  export default {
  data: function () {
    return {
      agency: {
        id: '',
        name: '',
        phone_number: ''
      },
      event_final: false
    };
  },

  created: function() {
    this.getAgency();
  },
  methods: {    
    getAgency() {
      this.$axios.get('/agency.json')
      .then(response => {
        if (Object.keys(response.data).length > 0) {
          this.agency = response.data;
          if (this.agency.name === "XYZ") {
           this.event_final = true;
          }
        }
      }).
      then(() => {
      });
    },   
  }
};
</script>

标签： javascriptvue.jsvuejs2vuetify.js

解决方案

已Agency在其事件中发出详细信息，next在父级捕获它们并将它们作为道具传递给Event.

鉴于您将初始数据加载到 中stepper.vue，您也可以将其传递给以Agency进行编辑

例如

// agency.vue
props: { editAgency: Object },
data () {
  return { agency: this.editAgency } // initialise with prop data
},
methods: {
  nextStep() {
    this.$emit('next', { ...this.agency }) // using spread to break references
  },
  // etc, no need for getAgency() here though
}

<!-- stepper.vue -->
<Agency :edit-agency="agency" @next="nextAgency"></Agency>
<!-- snip -->
<Event :agency="agency" />

// stepper.vue
methods: {
  nextAgency (agency) {
    this.agency = agency
    this.goTo(2, true)
  },

// event.vue
export default {
  props: { agency: Object } // no need for a local "data" copy of agency, just use the prop
}

推荐阅读