質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

2回答

469閲覧

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

amagami

総合スコア14

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2023/04/07 02:36

質問内容

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

参考サイト

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

vue

1<script setup lang="ts"> 2 3let t = "aaaa"; 4let title = "aaaaa"; 5function AChange() 6{ 7 t = "AAAAAA"; 8 console.log("aaaa"); 9 title = "aaaa"; 10} 11 12function BChange() 13{ 14 t = "bbbbbbb"; 15 console.log("bbbb"); 16 title = "bbbb"; 17 18} 19 20 21</script> 22 23 24 25 26<template> 27 28<button v-on:click="AChange()">A</button> 29<button v-on:click="BChange()">B</button> 30<a v-bind:href="t">{{title}}</a> 31 32</template> 33 34

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

解決方法
ref()

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

vue

1<script setup lang="ts"> 2 3let t = ref(""); 4let title = ref(""); 5function AChange() 6{ 7 t = "AAAAAA"; 8 console.log("aaaa"); 9 title = "aaaa"; 10} 11 12function BChange() 13{ 14 t = "bbbbbbb"; 15 console.log("bbbb"); 16 title = "bbbb"; 17 18} 19 20 21</script> 22 23 24 25 26<template> 27 28<button v-on:click="AChange()">A</button> 29<button v-on:click="BChange()">B</button> 30<a v-bind:href="t">{{title}}</a> 31 32</template> 33

投稿2023/04/08 00:10

amagami

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

js

1 data: function () { 2 return { 3 url: "#", 4 urlTitle: "", 5 }; 6 },

投稿2023/04/07 02:46

pippi19

総合スコア679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

amagami

2023/04/07 02:56

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

2023/04/07 04:08

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問