Javascript 在另一个视图Vue.js上显示表单文本

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

我想这是一个简单的问题，我需要在注册表上显示从输入字段保存的数据，以便在另一个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')
  }
}`

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

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

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

---

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

如果另一个组件是主组件的子组件，则可以使用道具-

如果另一个组件是父组件，则可以使用emit-

如果您不介意使用其他库，您可以使用Vuex（我认为这是您的最佳选择）——

在这种情况下，您必须使用突变定义存储、获取者和操作（它不像看上去那么复杂）：

将是这样的：

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}}

然后，您可以按如下方式设置存储中的值：

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}}

并在组件中显示，如下所示：

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}}

---

非常感谢法官47，我现在就来试试。@J3DI13你成功了吗？我没有。很不幸，我试了一下，但失败了。我想我需要多温习一下JavaScript，这让我很沮丧，因为这是列表中的最后一项。感谢您的关注@Justice47