提交时形成 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:628

logError    @   vue.esm.js:1893

globalHandleError   @   vue.esm.js:1888

handleError @   vue.esm.js:1848

invokeWithErrorHandling @   vue.esm.js:1871

invoker @   vue.esm.js:2188

original._wrapper   @   vue.esm.js:7565

TypeError: 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:1897

globalHandleError @ vue.esm.js:1888

handleError @ vue.esm.js:1848

invokeWithErrorHandling @ vue.esm.js:1871

invoker @ vue.esm.js:2188

original._wrapper @ vue.esm.js:7565

Answer 1

尝试将首字母移动store.dispatch('loadComments')到组件的 created 钩子中。export default {&nbsp; data: function () {&nbsp; &nbsp; return {}&nbsp; },&nbsp; methods:{&nbsp; &nbsp; submit(){&nbsp; &nbsp; let formData = new FormData(this.$refs.form)this.Redirect(`https://www.myapp.eu/parks/${encodeURIComponent(booking_url)}/park_availability/`);&nbsp; &nbsp; console.log(this)&nbsp; &nbsp; console.log(this.$store.state)&nbsp; &nbsp; this.$store.dispatch("searchAccommodations", formData)&nbsp; &nbsp; }&nbsp; },&nbsp; created () {&nbsp; &nbsp; this.$store.dispatch('loadComments')&nbsp; }}