提交时形成 vue.js，如何使用自定义 ID 链接到外部网站？

Question

我刚开始学习 VUE 以及如何在 Rails 项目中使用它。就我而言，我正在尝试创建一个嵌入式 javascript，商店可以在他们的网站上实施，这样他们的客户就可以寻找该商店可用的商品。目标是嵌入的 javascript 显示一个带有 2 个日期arrival和departure. 提交表单后，商店网站的访问者应该被重定向到我的应用程序，然后显示属于用户来自商店的可用商品。问题 我能够使其与具有固定 id ( see also the commented out code below) 的操作一起使用，但我不知道如何动态添加链接（例如，查找属于应该匹配的引用链接的商店 id booking_url，并重定向../park_availability page到我的应用程序）。尝试 1 + 错误消息：总体思路：submit method我尝试在文件的形式上创建一个javascript/app.vue，因此应该在提交时加载该searchAccommodations函数javascript/store.js。错误信息vue.esm.js:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"found in---> <App> at app/javascript/app.vue       <Root>warn    @   vue.esm.js:628logError    @   vue.esm.js:1893globalHandleError   @   vue.esm.js:1888handleError @   vue.esm.js:1848invokeWithErrorHandling @   vue.esm.js:1871invoker @   vue.esm.js:2188original._wrapper   @   vue.esm.js:7565TypeError: Cannot read property 'dispatch' of undefined    at VueComponent.submit (app.vue:36)    at submit (app.vue?0d7f:13)    at invokeWithErrorHandling (vue.esm.js:1863)    at HTMLFormElement.invoker (vue.esm.js:2188)    at HTMLFormElement.original._wrapper (vue.esm.js:7565)logError @ vue.esm.js:1897globalHandleError @ vue.esm.js:1888handleError @ vue.esm.js:1848invokeWithErrorHandling @ vue.esm.js:1871invoker @ vue.esm.js:2188original._wrapper @ vue.esm.js:7565

Answer 1

尝试将首字母移动store.dispatch('loadComments')到组件的 created 钩子中。

export default {

  data: function () {

    return {}

  },

  methods:{

    submit(){

    let formData = new FormData(this.$refs.form)

this.Redirect(`https://www.myapp.eu/parks/${encodeURIComponent(booking_url)}/park_availability/`);

    console.log(this)

    console.log(this.$store.state)

    this.$store.dispatch("searchAccommodations", formData)

    }

  },

  created () {

    this.$store.dispatch('loadComments')

  }

}