vuejsは現在のルート名を使用してimg srcを設定します

Question

images.Every pictures'nameがルート名であるファイルがあります。現在のルート名でimg src属性を変更したいのですが、完全なパスを取得できず、ピクチャ名しか取得できません。

<template> 

<!-- footer --> 
<div class="index-footer"> 
    <img v-bind:src = "$route.name" /> 
</div> 
</template> 

<script> 
import { Carousel } from 'iview' 
// export default { 
// components: { Carousel } 
// } 

export default { 
name: 'index', 
data() { 
    return { 
    index: '/static/img/footer/index.png', 
    more: '/static/img/footer/index.png', 
    product: '/static/img/footer/index.png', 
    information: '/static/img/footer/index.png', 
    news: '/static/img/footer/index.png', 
    down: '/static/img/footer/index.png', 
    enterprise: '/static/img/footer/enterprise.png', 
    value3: 0, 
    setting: { 
     autoplay: true, 
     autoplaySpeed: 4000, 
     dots: 'inside', 
     trigger: 'hover', 
     arrow: 'hover' 
    }, 
    scrolled: false 
    } 
}, 
components: { 
    Carousel 
} 
} 
</script> 

Answer 1

あなたは全くSRCを結合していません。バインディング・ディレクティブを使用してsrcをバインドする必要があります。

このよう

<img :src="index"> 

またはこの

<img v-bind:src="index"> 

Answer 2

使用this[this.$route.name]またはthis[$route.name]v-bindのための結合テキストとして。

v-bind evals the text you pass in as javascript code (expression, to be more exact)のようになります。式の変数をビューモデル（別名this）のメンバーと見なすのに少し余裕があります。

ここで手間のかかる部分は、this[this.$route.name]が欲しいということです。これは、V-ruleのテキストが「私はthisを記入します」というルールを使ってv-bindテキストに翻訳するのは混乱します。私はちょっと試して、this[this.$route.name]とthis[$route.name]の両方の作品が見つかりました。しかし、なぜ彼らが働くか分からない。 ：/