Vue3のeslint(vue/no-mutating-props)エラーについて

Question

実現したいこと

Vue3で作成しています。
component内で親から受け取るpropsの値を直接編集している為、esLintエラーが出ているのは認識していますが、正常動作しているので行ってる処理自体は変更せず、esLintの警告をつぶしたいです。

• esLintのエラーを取り除きたい

前提

以下の様に親コンポーネントから出力データを受け取り、カラム(このComponent)をクリックしたらウインドウを開きます。開いたウインドウが存在する場合はカラムにハイライトのStyleで表示させ、ウインドウが閉じていたらそのハイライトのStyleを除去します(ポーリングで行う)。

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

propsで受け取っている値を直接編集しようとしている為、esLintで警告が出力される。

eslint(vue/no-mutating-props)

該当のソースコード

<template>
  <a href="#" @click="handleClick">
    <span :class="{ 'high-light': rowData.isPopup}">りんく</span>
  </a>
</template>
...
const props =defineProps({
  rowData: {
    type: Object as PropType<DataRow>,
    required: true,
  }
})

const popupWindow = new Map<string, Window | null>();
setInterval(() => {
  const subWin = popupWindow.get(props.rowData.id);
  if (subWin) {
    props.rowData.isPopUp = !subWin.closed;          ←ここがesLintエラーになってる
  }
})

const handleClick = () => {
  const winObj = window.open("http://url", props.rowData.id, "width: 1000");
  popupWindow.set(props.rowData.id, winObj );
}

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

Vue3

よろしくお願いします。

Comments

[FKM]

propsで取得された値はそのままだとProxy制御かかってるので更新不可です。

なので
```
const xxx = props.xxx
```
として、間にクッションを置く必要があります。また、今回の場合はリアクティブ制御が必要なので

```
const xxx = toRef(props.xxx)
```

として、データを開いた状態にする必要があるかも知れません。

[juner]

defineProps の代わりに defineModel を使ったらいいのではないでしょうか？
https://ja.vuejs.org/api/sfc-script-setup#definemodel

Answer 1

propsで取得された値はそのままだとProxy制御かかってるので更新不可です。

なので

const xxx = props.xxx

として、間にクッションを置く必要があります。また、今回の場合はリアクティブ制御が必要なので

const xxx = toRef(props.xxx)

として、データを開いた状態にする必要があるかも知れません。

Answer 2

defineProps の代わりに defineModel を使ったらいいのではないでしょうか？

https://ja.vuejs.org/api/sfc-script-setup#definemodel

<template>
  <a href="#" @click="handleClick">
    <span :class="{ 'high-light': rowData.isPopup}">りんく</span>
  </a>
</template>
<script setup lang="ts">
...
const rowData =defineModel("rowData", {
    type: Object as PropType<DataRow>,
    required: true,
});

const isPopup = computed({
  get() {
    return rowData.value;
  },
  set(isPopup) {
    return rowData.value = {...rowData.value, isPopup};
  },
});

const popupWindow = new Map<string, Window | null>();
setInterval(() => {
  const subWin = popupWindow.get(rowData.value.id);
  if (subWin) {
    isPopUp.value = !subWin.closed;
  }
})

const handleClick = () => {
  const winObj = window.open("http://url", rowData.value.id, "width: 1000");
  popupWindow.set(rowData.value.id, winObj );
}