Vue <スクリプト設定> の反応性が機能しない
P粉029327711
2023-09-05 18:07:35
<p>vue で <code><script setup></code> 構文を試していますが、なぜ反応性が機能しないのか疑問に思っています。ここで何が間違っているのでしょうか？ </p>
<pre class="brush:js;toolbar:false;"><テンプレート>
<button @click="changeButtonText">{{ buttonText }}</button>
</テンプレート>
＜スクリプト設定＞
'vue' から { ref } をインポートします
let buttonText = ref("Foo")
関数changeButtonText() {
buttonText = "バー"
}
</スクリプト>
</pre>
<p>ref()を使わずに試してみます。
<code>buttonText = ref("Bar")</code> を使用してみてください。効果なし</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
関数内で変更する必要があります
buttonText = "バー" からbuttonText.value="バー"反応性の詳細については、次を参照してください: https://vuejs.org/api/reactivity-core.html#ref