Object内の要素をひとつだけ上書きしたい

前提

バックエンドにRails(API)、フロントエンドにVue.jsの構成で記事投稿サービスを開発しています。

実現したいこと

ユーザー詳細ページでは該当ユーザーが投稿した記事の一覧が表示されようになっています。
その中のどれかの記事にいいねしたときに、Vueが保持しているデータから該当の記事のみ上書きしたいです。
目的は自分がこの記事をいいねしているか否かといいね数といったデータが変化するので、いいねアイコンの状態の切り替えといいね数の表示を更新するためです。

発生している問題・エラーメッセージ

this.user.articles.find((v) => v.id === articleId) = response.data;
このようにObjectに対してfind()で検索をかけ、ヒットしたオブジェクトを上書きしようとしているのですが下記のエラーが出てしまいます。

Parsing error: Invalid left-hand side in assignment expression.

処理の流れ

現状の実装では下記のようになっており、③の部分で躓いています。

① ユーザー詳細ページアクセス時にユーザーのデータを取得する(ユーザーが投稿した記事のデータも入っている)
② いいねを登録する
③いいねした記事のデータを取得し、上書きする

該当のソースコード

①まず、ユーザー詳細ページにアクセスした際に下記のフォーマットでjsonを取得する。
(表題に関係なさそうな部分は省略しています)

javascript
1setUser() {
2      axios.get(process.env.VUE_APP_API_BASEURL + '/users/' + this.$route.params['user_id'])
3      .then((response) => {
4        this.user = response.data;
5      });
6    }

json
1{
2  "id": 1,
3  "name": "user1",
4  },
5
6  "articles": [
7      {
8          "id": 1,
9          "title": "user1の記事1",
10          "body": "本文",
11          "created_at": "2022-07-04T12:14:59.869+09:00",
12          "updated_at": "2022-07-04T18:35:23.705+09:00",
13          "image": {
14              "url": null
15          },
16          "user_id": 1,
17          "like_count": 2,
18          "is_liked": true
19      },
20      {
21        "id": 2,
22        "title": "user1の記事2",
23        "body": "本文",
24        "created_at": "2022-07-18T12:29:04.418+09:00",
25        "updated_at": "2022-07-18T12:29:04.418+09:00",
26        "image": {
27            "url": null
28        },
29        "user_id": 1,
30        "like_count": 1,
31        "is_liked": false
32      }
33  ]
34}

②is_likedがfalseになっている記事でいいねアイコンをクリックすると、createLike()メソッドでいいねが登録され、is_likedとlike_countが変化する。

javascript
1createLike(articleId) {
2      axios.post(process.env.VUE_APP_API_BASEURL + '/articles/' + articleId + '/article_likes', {
3        user_id: this.current_user_id
4      })
5      .then(() => {
6        this.setArticle(articleId);
7      });
8    },

③setArticle()でいいねした記事のデータの取得と上書きをする。
①で取得した記事のまとまりがthis.user.articlesとして扱えるので、そのうちの一つの記事だけデータを上書きする。

javascript
1setArticle(articleId) {
2      axios.get(process.env.VUE_APP_API_BASEURL + '/articles/' + articleId)
3      .then((response) => {
4        this.user.articles.find((v) => v.id === articleId) = response.data;
5      });
6    }

json:setArticle()のレスポンス
1{
2    "id": 1,
3    "title": "user1の記事1",
4    "body": "本文",
5    "created_at": "2022-07-04T12:14:59.869+09:00",
6    "updated_at": "2022-07-04T18:35:23.705+09:00",
7    "image": {
8        "url": null
9    },
10    "user_id": 1,
11    "like_count": 2,
12    "is_liked": true
13}

試したこと

下記のように一度変数に入れて再代入する形にすると'article' is assigned a value but never usedというエラーになりました。

javascript
1setArticle(articleId) {
2      axios.get(process.env.VUE_APP_API_BASEURL + '/articles/' + articleId)
3      .then((response) => {
4        var article = this.user.articles.find((v) => v.id === articleId);
5        article = response.data;
6      });
7    }

補足情報（FW/ツールのバージョンなど）

Ruby on Rails: 6.1.4
Vue.js: 2.6.14

回答1件

ベストアンサー

findIndex を使った方がよさそうに思えます。
Array.prototype.findIndex() - JavaScript | MDN

js
1  const arr = [10,20,30]
2  const x = 20
3  arr.find(e=>e===x) // 20
4  //
5  // arr.find(e=>e===x) = 0
6  // は以下と同等
7  // 20 = 0
8  //
9  arr.findIndex(e=>e===x) // 1
10  arr[arr.findIndex(e=>e===x)] = 0
11  console.log(arr) // [10, 0, 30]
12  //
13  // 代入の左辺式には変数やプロパティが必要
14  //