小编Phu*_*uan的帖子

目前,我正在通过谷歌构建登录功能,我遇到了一些让我感到困惑的问题.

我们可以在一个项目中同时使用Restful API和Graphql API吗？除了Google身份验证,我们需要一些路由来处理它.对于CRUD操作,我们使用Graphql.

像这样的东西:

const { GraphQLServer } = require('graphql-yoga');
const { Prisma } = require('prisma-binding');
const resolvers = require('./resolvers');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {

  // mongoose.
  User.findById(id).then(user => {
    done(null, user);
  });

});

passport.use(new GoogleStrategy(
  {
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: '/auth/google/callback',
  },
  (accessToken, refreshToken, profile, done) => {
    console.log(profile);

    // After receive profile info from google, call mutation and save
    // profile into …

我正在使用Formik来构建我的表单。

我的表单有 3 个文本区域和 1 个选择下拉列表

对于选择下拉列表，我使用了IssueSelect（作为FieldArrayFormik 中的 a）。

并且IssueSelect，我用于创建和更新表单。

我的组件如下所示：

const IssueSelect = ({ values }) => (


<FieldArray
    name="issues"
    render={({ remove, insert, push }) => (
      <div>
        {values.issues && values.issues.length > 0 ? (
          values.issues.map((iselected, index) => (
            <div key={uuidv1()}>
              <div>
                <Field
                  value={iselected.id}
                  component="select"
                  name={`issues.${index}`}
                >
                  {issues.map(issue => (
                    <option key={issue.id} value={issue.id}>
                      {issue.name}
                    </option>
                  ))}
                </Field>
              </div>

              <div>
                <button onClick={() => remove(index)}>
                  <b> - </b>
                </button>
                <button onClick={() => insert(index, …

如何使用Vuex更新数组内的对象？我试过这个,但它不起作用:

const state = {
  categories: []
};

// mutations:
[mutationType.UPDATE_CATEGORY] (state, id, category) {
  const record = state.categories.find(element => element.id === id);
  state.categories[record] = category;
}

// actions:
updateCategory({commit}, id, category) {
  categoriesApi.updateCategory(id, category).then((response) => {
    commit(mutationType.UPDATE_CATEGORY, id, response);
    router.push({name: 'categories'});
  })
}

我读了一些关于这个的教程。他们告诉我应该使用 ref 来做到这一点。但它很一般。

这里是我的问题：基本上在Header成分包括NavBar，SearchBar和ResultSearch组件。

const Header = () => {
return (
    <header className="ss_header">
        <Navbar />
        <SearchBar />
        <ResultSearch />
    </header>
);
};

并在SearchBar组件中。每当我专注于输入文本时。它ResultSearch以任何方式（改变样式或...）发出事件和显示组件。

class SearchBar extends Component{
render() {

    return (
        <div className="search_bar">
            <section className="search">
                <div className="sub_media container">
                    <form method="GET" action="" id="search_form">
                        <Icon icon="search" />
                        <span className="autocomplete">

                        <input
                            className="search_input"
                            autoCorrect="off"
                            autoComplete="off"
                            name="query"
                            type="text"
                            placeholder="Search for a movie, tv show, person..." />
                    </span>
                    </form>
                </div>
            </section>
        </div>
    ); …

作为Vuex,我正在尝试使用表单更新对象.我的代码是这样的.

有存货:

const state = {
   categories: []
};

//mutations:
[mutationType.UPDATE_CATEGORY] (state, id, category) {
    const record = state.categories.find(element => element.id === id);
    state.categories[record] = category;
}

//actions:
updateCategory({commit}, id, category) {
  categoriesApi.updateCategory(id, category).then((response) => {
    commit(mutationType.UPDATE_CATEGORY, id, response);
    router.push({name: 'categories'});
  })
}

.Vue文件中的模板:

    <form>
      <div class="form-group">
        <label for="Name">Name</label>
        <input
          type="text"
          class="form-control form-control-sm"
          name="name"
          v-model.lazy="category.name" required>
      </div>

      <div class="form-group">
        <label for="Slug">Slug</label>
        <input
          type="text"
          class="form-control form-control-sm"
          name="slug"
          v-model.lazy="category.slug" required>
      </div>

      <div class="form-group">
        <label for="Avatar">Avatar</label>
        <input
          type="text"
          class="form-control form-control-sm"
          name="avatar"
          v-model.lazy="category.avatar" required> …

我正在使用Vue js中的路由器.我通过为每个链接添加样式router-link-active和exact属性来显示Navbar中的当前链接<router-link>.它工作正常.

但现在我正在尝试使用类is-active(Bulma CSS)来完成它.我怎样才能做到这一点 ？.

码

<a class="navbar-item is-active">
      <router-link to="/" exact>Home</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/about" exact>About</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/information" exact>Information</router-link>
    </a>

任何逻辑和解决方案？请帮我.

我遵循这个代码：

import React from 'react';
import { Formik, Form, Field, FieldArray } from 'formik';

// Here is an example of a form with an editable list.
// Next to each input are buttons for insert and remove.
// If the list is empty, there is a button to add an item.
export const FriendList = () => (
  <div>
    <h1>Friend List</h1>
    <Formik
      initialValues={{ friends: ['jared', 'ian', 'brent'] }}
      onSubmit={values =>
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500)
      }
      render={({ …