javascript - 在另一个 View 上显示表单文本 Vue.js

Question

我绝不是 JavaScript 或 Vue.js 开发人员，我在这个领域的知识有限，但我们的开发人员已经离开了我们，所以我给它一个 bash。

我认为这是一个简单的问题，我需要显示从注册表单上的输入字段保存的数据，以便在另一个 Vue 中显示为文本。

以下是必须从中提取数据的表单中的字段。

下面是数据和方法结构。

data () {
return {
  activeTab: 'general',
  account: {},
  showByIndex: null,
  daycation: {
    title: '',
    description: '',
    listing_type_id: '',
    phone_number: '',
    e_mail: '',
    adult_price: 0,
    child_price: 0,
    infant_price: 0,
    pensioner_price: 0,
    latitude: '',
    longitude: '',
    map_address: '',
    region_id: '',
    business_id: '',
    media: null,
  },
  open_weekdays: [],
  alert: {
    class: '',
    show: false,
    message: ''
  }
}

},

methods: {
    getDaycation: function () {
      this.$http
        .get('my-daycations/edit/' + this.$route.params.uuid)
        .then(res => {
          if (res.body.error) {
            console.log(res)
            return
          }
          this.daycation = res.body.daycation
          this.open_weekdays = res.body.daycation.open_weekdays.length > 0 ? res.body.daycation.open_weekdays : []
          this.opening_time = res.body.opening_time
          this.closing_time = res.body.closing_time
          this.latLng = {
            lat: parseFloat(res.body.daycation.latitude),
            lng: parseFloat(res.body.daycation.longitude)
          }
        })
        .catch(res => {
          console.log(res)
        })
    },
    saveDaycation: function () {
      this.hideAlert()
      this.$Progress.start()
      this.$validator.validateAll().then(result => {
        if (!result) {
          this.$Progress.fail()
          return
        }
        this.daycation.open_weekdays = this.open_weekdays
        let data = this.daycation
        this.$http
          .put('my-daycations/edit/' + this.$route.params.uuid, data)
          .then(res => {
            if (res.body.error) {
              this.$Progress.fail()
              this.showAlert(
                result.body.message,
                'alert-danger',
                'error_outline'
              )
              return
            }
            this.$Progress.finish()
            this.showAlert(
              'Daycation has been updated.',
              'alert-success',
              'check_circle_outline'
            )
            window.scrollTo(0, 0)
          })
          .catch(res => {
            console.log(res)
            this.$Progress.fail()
          })
      })
    },
    showAlert: function (message, cssClass) {
      this.alert.class = cssClass
      this.alert.message = message
      this.alert.show = true
    },
    hideAlert: function () {
      this.alert.show = false
      this.alert.class = ''
      this.alert.message = ''
    }
  },
  created () {
    this.getDaycation()
    this.avatar = localStorage.getItem('_user_avatar_url')
  }
}`

这里是必须打印输入字段数据的地方

 <p class="mt-0 mb-0">Email <strong>{{daycation.e_mail}}</strong></p>
    <p class="mt-0 mb-0">Phone <strong>{{daycation.phone_number}}</strong></p>

及其数据和方法结构。

data () {
    return {
      longDescription: false
    }
  },
  methods: {},
  created () {}
}

Answer 1

答案取决于您所说的“另一种观点”是什么意思。如果您指的是另一个组件(我希望如此)，则有几个选项。

如果另一个组件是主组件的子组件，您可以使用 props - https://v2.vuejs.org/v2/guide/components.html#Passing-Data-with-Props

如果另一个组件是父组件，您可以使用 emit - https://forum.vuejs.org/t/passing-data-back-to-parent/1201

如果您不介意使用其他库，您可以使用 Vuex(我认为它是您的最佳选择)- https://flaviocopes.com/vuex/

在这种情况下，您必须定义store、getters 和actions 以及mutations(它没有那么复杂似乎):

会是这样的:

export default function () {
  const Store = new Vuex.Store({
    state: {
      email: '',
      phone: ''
    },
    getters: {
      EMAIL: state => state.email,
      PHONE: state => state.phone
    },
    mutations: {
      SET_EMAIL: (state, payload) => {
        state.email = payload
      },
      SET_PHONE: (state, payload) => {
        state.phone = payload
      },
    },
    actions: {
      SAVE_EMAIL: (context, payload) => {
        context.commit ('SET_EMAIL', payload);
      },
      SAVE_PHONE: (context, payload) => {
        context.commit ('SET_PHONE', payload);
      }
    },
  })

  return Store
}

然后你可以像这样设置存储中的值:

this.$store.dispatch(
  "SAVE_EMAIL",
  'my email'
);

然后像这样在组件中显示:

{{this.$store.getters.EMAIL}}