vue.js v-bindした値が変わらない原因が知りたい。

Question

質問内容

提示コードですが参考サイトを参考に実装したのですがクリックしても表示が変わりませんこれは何が原因なのでしょうか？

参考サイト

v-bind: https://web-engineer-wiki.com/javascript/vue/v-bind/
vite: https://codezine.jp/article/detail/14939

実行画面

コンソールログ

App.vue:15 bbbb
App.vue:8 aaaa
App.vue:15 bbbb
App.vue:8 aaaa
App.vue:15 bbbb

デバッグコンソール

app.vue

<script setup lang="ts">

let t = "aaaa";
let title = "aaaaa";
function AChange() 
{
        t = "AAAAAA";
        console.log("aaaa");
        title = "aaaa";
}

function BChange() 
{
        t = "bbbbbbb";
        console.log("bbbb");
        title = "bbbb";

}


</script>




<template>

<button v-on:click="AChange()">A</button>
<button v-on:click="BChange()">B</button>
<a v-bind:href="t">{{title}}</a>

</template>

Answer 1

解決方法

ref()

を利用することで解決しました。よって提示コードは以下のように修正する必要があります
リファレンス：https://ja.vuejs.org/api/reactivity-core.html

<script setup lang="ts">

let t = ref("");
let title = ref("");
function AChange() 
{
        t = "AAAAAA";
        console.log("aaaa");
        title = "aaaa";
}

function BChange() 
{
        t = "bbbbbbb";
        console.log("bbbb");
        title = "bbbb";

}


</script>




<template>

<button v-on:click="AChange()">A</button>
<button v-on:click="BChange()">B</button>
<a v-bind:href="t">{{title}}</a>

</template>

Answer 2

その記述だとjsとして、ただ変数に値を入れているだけで、
Vue.jsの仕組みを一切使っていないのでbindされません。

Vueの一番基礎が理解できていないように思いますので、
まずはチュートリアルをやることをお勧めします。

ちなみに、参考にしたサイトだとのこの部分が必要です。

  data: function () {
    return {
      url: "#",
      urlTitle: "",
    };
  },

Comments

[amagami]

ありがとうございます。main.tsにて以下のように記述しているのですがこの場合はどうすればいいのでしょうか？
```
import { createApp } from 'vue'
import './style.css'
import App from './App.vue';

createApp(App).mount('#app')

```

[reimei]

app.vueのscript内の書き方をよく学んだほうが良いかと思います。
最初は「vue function 書き方」で調べてみた方がいいかもですね。