javascript - 提交时形成 vue.js，如何使用自定义 id 链接到外部网站？ "error: Cannot read property ' 未定义的调度”

Question

我刚刚开始学习 VUE 以及如何在 Rails 项目中使用它。就我而言，我正在尝试创建一个嵌入式 JavaScript，商店可以在其网站上实现该 JavaScript，以便他们的客户可以查找该商店​​可用的商品。

目标是嵌入的 JavaScript 显示一个包含 2 个日期到达 和离开 的表单。提交表单后，商店网站的访问者应被重定向到我的应用程序，然后该应用程序会显示属于用户所在商店的可用商品。

问题我能够使其与具有固定 id 的操作一起使用(另请参阅下面注释掉的代码)，但我不知道如何动态添加链接(例如，查找属于引用链接应与 booking_url 匹配，并重定向到我的应用的 ../park_availability 页面)。

尝试 1 + 错误消息:

总体思路:我尝试以文件 javascript/app.vue 的形式创建一个 submit 方法，因此应该加载该函数提交时 javascript/store.js 中的 searchAccommodations。

错误信息

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

javascript/app.vue(商店应插入表单)

<template>

<!-- For reference Working link commented out below -->
    <!-- <form id="myapp-reservation-form" action="https://www.myapp.eu/parks/18/park_availability" ref="form" method="get"> -->


<form @submit.prevent="submit" id="myapp-reservation-form" ref="form">

    <div class="myapp-reservation-form-item">
      <h6>Arrival</h6>
      <input type="date" id="arrival" name="arrival" class="form-control"/>
    </div>
    <div class="myapp-reservation-form-item">
      <h6>Departure</h6>
      <input type="date" id="departure" name="departure" class="form-control" />
    </div>
    <div class="myapp-reservation-form-item">
      <h6></h6>
        <button class="btn search-accommodations-button">Search</button>
    </div>
  </form>
</template>

<script>
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.state.$store)
    this.$store.dispatch("searchAccommodations", formData)
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

console.log(这个)

VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$attrs: (...)
$listeners: (...)
$data: (...)
$props: (...)
$isServer: (...)
$ssrContext: (...)
_uid: 1
_isVue: true
$options: {parent: Vue, _parentVnode: VNode, propsData: undefined, _parentListeners: undefined, _renderChildren: undefined, …}
_renderProxy: Proxy {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_self: VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$parent: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$children: []
$refs: {form: form#myapp-reservation-form}
_watcher: Watcher {vm: VueComponent, deep: false, user: false, lazy: false, sync: false, …}
_inactive: null
_directInactive: false
_isMounted: true
_isDestroyed: false
_isBeingDestroyed: false
_events: {}
_hasHookEvent: false
_vnode: VNode {tag: "form", data: {…}, children: Array(5), text: undefined, elm: form#myapp-reservation-form, …}
_staticTrees: (3) [VNode, VNode, VNode]
$vnode: VNode {tag: "vue-component-1", data: {…}, children: undefined, text: undefined, elm: form#myapp-reservation-form, …}
$slots: {}
$scopedSlots: {$stable: true, $key: undefined, $hasNormal: false}
_c: ƒ (a, b, c, d)
$createElement: ƒ (a, b, c, d)
_watchers: [Watcher]
submit: ƒ ()
_data: {__ob__: Observer}
$el: form#myapp-reservation-form
get $attrs: ƒ reactiveGetter()
set $attrs: ƒ reactiveSetter(newVal)
get $listeners: ƒ reactiveGetter()
set $listeners: ƒ reactiveSetter(newVal)
__proto__: Vue

javascript/packs/embed.js(用于加载 app.vue 中显示的初始表单)

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
import store from '../store'


const event = (typeof Turbolinks == "object" && Turbolinks.supported) ? "turbolinks:load" : 'DOMContentLoaded';

document.addEventListener(event, () => {
  const el = document.querySelector('#myapp-reservation-form')
  store.dispatch('loadComments')
  const app = new Vue({
    el,
    store,
    render: h => h(App)
  })
})

javascript/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const store = new Vuex.Store({
  state: {
    accommodation_categories:[]
  },

  mutations: {
    load(state, accommodation_categories){
      state.accommodation_categories = accommodation_categories
    },
  },

  actions: {

    async loadComments({ commit }){
      let booking_url = window.location.href
      fetch(`https://www.myapp.eu/api/v1/parks/${encodeURIComponent(booking_url)}/form_availability/`,{
        headers: {accept: 'application/json'}
      })
      .then(response => response.json())
      .then(data => commit('load', data))
    },

    async searchAccommodations({commit}, formData){
      let booking_url = window.location.href
      fetch(`https://www.myapp.eu/parks/${encodeURIComponent(booking_url)}/park_availability/`,{
        headers: {accept: 'application/json'},
        method: "get",
        body: formData,
      })
      .then(response => response.json())
      .then(data => commit('load', data))
    }
  }
})



window.store = store

export default store

尝试 2 + 错误消息:按照@ellisdod的提示，我尝试将初始 store.dispatch('loadComments') 移动到我的组件的创建的钩子(Hook)中。

错误信息

vue.esm.js:628 [Vue warn]: Error in v-on handler: "TypeError: this.Redirect is not a function"

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

vue.esm.js:1897 TypeError: this.Redirect is not a function
    at VueComponent.submit (app.vue:32)
    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)

javascript/app.vue(脚本更改)

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

}

Answer 1

尝试将初始的 store.dispatch('loadComments') 移动到组件的已创建钩子(Hook)中。

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

}