回答編集履歴

提案を追加しました

2023/06/16 01:37

投稿

スコア28

test CHANGED Viewed

@@ -58,3 +58,38 @@
 </template>
 ```
+**追加の提案**
+hogeを変更するイベントが発行される要素の参照とイベントハンドラーを分ける方法
+```js
+<script setup>
+import { ref } from "vue";
+const hoge = ref(1);
+const doSomthing = () => {
+  console.log("doSomthing", hoge.value);
+  return Promise.resolve("success");
+};
+const handleChange = async (event) => {
+  const result = await doSomthing();
+  if (result) {
+    hoge.value = event.target.value;
+  }
+  console.log("handleChange", event.target.value);
+};
+</script>
+<template>
+  <p>
+    <input :value="hoge" @input="handleChange" />
+  </p>
+</template>
+```

微調整

2023/06/14 04:17

投稿

スコア28

test CHANGED Viewed

@@ -26,6 +26,7 @@
 **②hogeを変更監視・参照する値として利用する方法**
 hogeのみで監視・参照を行う必要があれば `doSomething` の処理結果に応じて、watch関数内で `hoge.value` の値を入れ直す方法はいかがでしょうか？
+(これは循環参照が起こるかも？)
 ```ts
 <script setup>

hogeのみで監視・参照を行う方法を追加

2023/06/14 04:16

投稿

スコア28

test CHANGED Viewed

@@ -1,4 +1,4 @@
-**hogeは変更監視の値として利用して、表示などに参照する値にはfugaを利用する方法**
+**①hogeは変更監視の値として利用して、表示などに参照する値にはfugaを利用する方法**
 watch関数、第2引数のコールバックをasyncにして `await doSomething` にするのはいかがでしょうか？
 https://ja.vuejs.org/guide/essentials/watchers.html#basic-example
@@ -23,3 +23,37 @@
 </template>
 ```
+**②hogeを変更監視・参照する値として利用する方法**
+hogeのみで監視・参照を行う必要があれば `doSomething` の処理結果に応じて、watch関数内で `hoge.value` の値を入れ直す方法はいかがでしょうか？
+```ts
+<script setup>
+  const hoge = ref<number>(1);
+  const doSomething = async () => {
+    const result = await piyo();
+    return result;
+  };
+  watch(hoge, async (new, old) => {
+    const condition = await doSomething();
+    switch(condition) {
+      case 'success':
+        hoge.value = new;
+        break;
+      case 'fail':
+        hoge.value = old;
+        break;
+      case 'x':
+        ...
+    }
+  });
+</script>
+<template>
+  <p>
+    <input v-model="hoge" />
+  </p>
+</template>
+```