在MeteorJS中的表单上，在onSubmit之后路由到一个新的URL。

Posted 2021-03-19

我需要在应用程序中移动到另一个URL，使:id成为表单中URL的一部分。基本上，一旦有人在表单中输入代码并提交，我就需要移动到另一个包含该代码的路径。

import { Template } from 'meteor/templating';
import { FlowRouter } from 'meteor/ostrio:flow-router-extra'

import './search.html';
import './restaurants.js';

Template.body.events({
  'submit .search-restaurant'(event) {
    // Prevent default browser form submit
    //event.preventDefault();

    // Get value from form element
    const target = event.target;
    const postCode = target.text.value;
    FlowRouter.go('/restaurants/{{postCode}}');
    //Meteor.setTimeout(function() {FlowRouter.go('restaurants.show'), { postCode: postCode }}, 100)
   //FlowRouter.go('restaurants.show');
    //target.text.value = '';
  },
});

而这就是表单。

<template name="search">
<p> Enter your postcode to see restaurants around you </p>
    <form class="search-restaurant">
      <input type="text" placeholder="4169" />
    </form>
</template>

答案

你应该使用以下方法构建你的URL 模板字数:

const postCode = target.text.value;
FlowRouter.go(`/restaurants/${postCode}`);

这将解决一个名为 foo 到 /restaurants/foo所以 :id 将是 "foo" 那么。

另一答案

作为对Jankapunkt答案的补充，你可以将id传给 go 在一个选项对象中。

FlowRouter.go('restaurants.show'), { id: postCode });

---

我知道你在这条线上试过了 I can see that you tried that on this line:

//Meteor.setTimeout(function() {FlowRouter.go('restaurants.show'), { postCode: postCode }}, 100)

但是如果你的路径使用 :id的对象，然后你需要传递一个带键的 id. 另外，您在 : postcode } 所以这可能也是为什么没有成功的原因。