v-forで挿入した文字列すべてにスタイルを充てたいが記述方法が分からない

Question

現在難航していること

Vue.jsの勉強をしており、現在は、v-forで変数の値をhtml画面に出力するところを試行しています。
文字列を画面に出力することは出来たのですが、タイトルのように、出力した値にスタイルの効果を付ける方法が分からずに、その後進展させられていない状態にあります。

ここまでに記述してきたコードは、次のとおりです。

// index.html
<div id="app">
  <h2>My Traffic Route</h2>
  <h3>出発駅：{{ start }} ／ 到着駅：{{ goal }}</h3>
  <ol>
    <li v-for="route in routes" @mouseover="toggle()">
      {{ route.getOn }} —（{{route.line}}）— {{ route.getOff }}
    </li>
  </ol>
</div>
<script>
new Vue({
  el: "#app",
  data: {
  	start: "大宮",
    goal: "成田",
    routes: [
      { line: "宇都宮線", getOn:"大宮", getOff: "上野" },
      { line: "常磐線", getOn:"上野", getOff: "我孫子" },
      { line: "成田線", getOn:"我孫子", getOff: "成田" }
    ]
  },
	methods: {
  	toggle: function(){
			// ここにどう書き込むべきなのか
    }
  }
})
</script>

追加したテキストにマウスカーソルを当てた時だけ字が赤くなるようにしようとしています（:hoverと同じ効果）。

試みたこと

スクリプトタグ内のVue.jsで、methods:以下を次のように記述してみましたが、企図していた上記の効果（:hover）を発現させられませんでした。

  },
	methods: {
  	toggle: function(){
	     this.style.color = "red"
    }
  }
})

上記の記述ではなく、どのような記述をメソッド内に追加すれば、今回の企図している効果を実装することができるでしょうか。

Vue.jsにまつわる初歩的な問題かとは存じておりますが、ご存じの方がいらっしゃいましたら、ご回答をお願い致します。

Answer 1

スタイルタグを利用するのが一般的です。

Vue Component の仕様 · vue-loader
スコープ付き CSS · vue-loader

Comments

[Nishin]

コメントありがとうございます。
また、Vue.jsの機能にまつわるリンクサイトまでご教示頂き、ありがとうございます。

Vue.jsはまだ学習を開始してから日数も浅く、ドットインストールやUdemyの講座で学習している最中なので、応用・派生事項を探す時に参照できる分かりやすいサイトにアクセスできるのはうれしいところです。

Answer 2

こんにちは。
mouseoutハンドラを追加する方法ではどうでしょうか。

<li v-for="route in routes" @mouseover="mover" @mouseout="mout" >

<script>
    methods:{
    mover:function(event){
      event.target.style.color='red';
    },
    mout:function(event){
      event.target.style.color='';
    }
  }
</script>

他に最適な方法が有るかもしれませんが、ご参考までに。

Comments

[Nishin]

コメントと具体的なコードの記述方法のご教示をありがとうございます。

メソッドの中にさらにマウス系のメソッドを書き込むのですね。
そしてstyleの前に付けるのは「this」でなく「event.target」。
JQuery慣れしてしまってた感がある身としては、プレーンのJSっぽい感じでコードを記述するのには些か苦労しそうですが、慣れていかなきゃなりませんね。

Answer 3

https://arrown-blog.com/vuejs-listhighlight-onmouseover/ を参考に
methods:toggle() を使わない場合で書いてみました。

<style>
  .selected {
    color: red;
  }
</style>
<div id="app">
  <h2>My Traffic Route</h2>
  <h3>出発駅：{{ start }} ／ 到着駅：{{ goal }}</h3>
  <ol>
    <li v-for="route in routes" v-bind:class="{selected:activeItem===route}" @mouseover="activeItem=route" @mouseout="activeItem=''">
      {{ route.getOn }} —（{{route.line}}）— {{ route.getOff }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: "#app",
  data:{
    start: "大宮",
    goal: "成田",
    routes: [
      { line: "宇都宮線", getOn:"大宮", getOff: "上野" },
      { line: "常磐線", getOn:"上野", getOff: "我孫子" },
      { line: "成田線", getOn:"我孫子", getOff: "成田" }
    ],
    activeItem: "",
  }
})
</script>

ちなみに最初に考えた下記のコードだと、1行ごとに色が切り替わりませんでした。（3行まとめて色が変わる）

// 下記はボツ案。3行まとめて色が変わってしまう。
<style>
  .hover {
    color: red;
  }
</style>

<div id="app">
  <h2>My Traffic Route</h2>
  <h3>出発駅：{{ start }} ／ 到着駅：{{ goal }}</h3>
  <ol>
    <li v-for="route in routes"  @mouseover="toggle()" @mouseleave="toggle()" :class="{'hover': hovered}">
      {{ route.getOn }} —（{{route.line}}）— {{ route.getOff }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    start: "大宮",
    goal: "成田",
    routes: [
      { line: "宇都宮線", getOn:"大宮", getOff: "上野" },
      { line: "常磐線", getOn:"上野", getOff: "我孫子" },
      { line: "成田線", getOn:"我孫子", getOff: "成田" }
    ],
    hovered: false,
  },
    methods: {
      toggle: function(){
        this.hovered = !this.hovered
    }
  }
})
</script>

Comments

[Nishin]

コメントありがとうございます。

それから複数も分かりやすいコードを提示して頂き、参考になりました。
v-onを複数付けなきゃいけないのがちょっとややこしいですが、やってみます。