常連

注目の的

社会貢献

質問力

支持者

○ボタンを押下したら右に、左ボタンを押したら左に動くカードがあります。
○ボタンを押下した後にすぐに左ボタンを押下すると右に移動して画面から消える前に左に移動してしまいます。
一回ボタンを押したら一番上のカードはその方向に移動するようにしたいです。また連続してボタンを押した時（○ボタンを押下した後に✖️ボタン押下）は
一番上のカードは右に動いて、次のカードが左に動くようにしたいです。
どのように実装したらいいでしょうか？
[コード記載](https://codesandbox.io/s/romantic-sound-7es96?file=/src/App.tsx)

react 同じ処理が連続して呼ばれる時の挙動

### 前提・実現したいこと
丸ボタンを押したときにBoxが右に移動して画面から消えます。
罰ボタンを押した時に左にBoxが動いて画面から消えます。
cardの配列cardsをmapで回して表示しています。
ボタンを押下した時に最前面のBoxだけ移動したいのですが、なぜか後ろのBoxも移動してしまいます。
cardsの配列のlenghtは３なので３回ボタンを押下したらBoxがなくなるはずですが、２回押下したタイミングで画面からBoxが全部消えてしまいます。どうしたらいいでしょうか？
わかる人いましたらご教授お願いしたいです。
よろしくお願いします。




### 補足情報（FW/ツールのバージョンなど）
react
scss
Typescript
framer-motion

react buttonを押下した後のBoxのアニメーションが複数回行われる。

データを取得(get)の処理をaxiosを使っていたのですがswrに書き換えてgetの通信をしてみました。
そしたら401エラーになりNot enough or too many segments"というメッセージがコンソールに表示されました。
セグメントのエラーというのはどういうものなのでしょうか？
修正したいのですがセグメントエラーがどういうものなのかがわからず困っています。
わかる人いましたらご教授お願いしたいです。

開発環境はnext.js Typescriptを使っています。
以下のコードがaxiosからswｒを使った処理に書き換えたコードです。


```ここに言語を入力
import useSWR from 'swr';
import { Axios } from './axios';

const token = ***********************
const lang = 'jp';

export const useUserList = (id: number) => {
  const path = `/list/${id}`;

  const fetcher = (url, params) => {
    Axios.get(url, {
      params: { lang: params.lang },
      headers: { Authorization: `Bearer${params.token}` },
    }).then((res) => res.data);
  };
  const { data, error } = useSWR(
    [path, { params: { token, lang } }],
    fetcher
  );
  return {
    user: data,
    isLoading: !error,
    isError: error,
  };
};

```

データ通信　セグメントのエラー

### 前提・実現したいこと
this.$router.push({   を使ってgroup/memberページに遷移させて、totalCountとcountの値も一緒に渡してあげたく、下記のように書きました。
しかしMemberPageでconsole.logを使ってみてみるとtotalCountもcountもundifindとなっていました。
propsの受け取り方が悪いのでしょうか？
自分では解決できなかったのでわかる人いましたらご教授お願いしたいです。


### 該当のソースコード

```ここに言語名を入力
  TransitionUrl() {
    this.$router.push({
      path: this.getUrl(),
       params: {
         totalCount: this.totalCount.toString(),
         count: this.count.toString()
         }
      })
    }

  getUrl() {
    return `/group/member`
  }
```

```ここに言語を入力
<template>
  <div class="column">
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class MemberPage extends Vue {
  @Prop({ type: String, default: '' }) totalCount: string
  @Prop({ type: String, default: '' }) count: string

  created() {
    console.log(this.totalCount)
    console.log(this.count)
 
  }
```

Vue.js URL遷移時のpropsの受け取り方法

Listをfor文で回してlistitemを表示しています。for文で回したlistのstatusがopenの時とcloseの時で違うスタイルを当てたく、
if文で条件分岐したのですがうまく行きません。
わかる人がいましたら教えて欲しいです。


```ここに言語を入力
//エラー内容
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "open" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in
```

```ここに言語を入力
    <ul v-else class="list">
      <li
        v-for="user in getUserEntities()"
        :key="user.code"
      >
        <list-item
          v-if="user.status == open"
          :user="user"
        />
        <list-item
          v-if="user.status === close"
          :user="user"
          class="closelist"
         /> 
      </li>
    </ul>

  <style lang="scss" scoped>
    .closelist {
      background-color: white;
    }
```