vue templeteの中にdataを入れたい

Question

vue.jsのtemplete機能を使っております。
createdにて現在の階層を図り、階層の数に応じて変数をセットする仕組みを
作りましたが、{{herepath}}がそのままの表示となってしまいます、
原因がわかりません。
vueに詳しい方教えていただきたいです。よろしくお願い致します。

実ソース

   new Vue({
      el: '#footer',
      data () {
        return {
          herepath: './'
          }
      },
      created: function () {
        var slugs = location.pathname.split('/')
        if(slugs[2]){
          herepath = '../../'
        }else if(slugs[1]) {
          herepath = '../'
        }else{
          herepath = './'
        }
        console.log(herepath)
        return herepath;
      },
      methods:{},
      template:
    `<footer id="footer">
      <div class="footer_inn">
        <div class="f_logo"><a href="{{herepath}}"><img src="http://placehold.jp/24/cccccc/ffffff/210x80.png?text=ダミー画像です"></a></div>
        <div class="footer_content">
          <nav class="fnavi">
            <ul>
              <li><a href="{{herepath}}">トップ</a></li>
              <li><a href="#">代表メッセージ</a></li>
              <li><a href="{{herepath}}voice/001.html">新入社員の声</a></li>
              <li><a href="{{herepath}}company/">会社案内</a></li>
              <li><a href="#">募集要項</a></li>
              <li><a href="#">説明会日程</a></li>
              <li><a href="{{herepath}}contact/">エントリー</a></li>
              <li><a href="https://www.facebook.com/vertex.realestate/"　target="_blank">Facebook</a></li>
            </ul>
          </nav>
          <div class="copyright"><p>Copyright&nbsp;</p></div>
        </div>
      </div>
    </footer>`
})

Answer 1

2点間違いがあります

attributesのバインディングシンタックス

間違い

<a href="{{herepath}}">トップ</a>
<a href="{{herepath}}voice/001.html">新入社員の声</a>

正解

<a :href="herepath">トップ</a>
<a :href="herepath+'voice/001.html'">新入社員の声</a>

created内でのローカル変数のスコープ

間違い

created: function () {
  var slugs = location.pathname.split('/')
  if(slugs[2]){
    herepath = '../../' // thisが必要
  }else if(slugs[1]) {
    herepath = '../'// thisが必要
  }else{
    herepath = './'// thisが必要
  }
  console.log(herepath)
  return herepath;// 返り値を渡しても何も起こらない
},

正解

created: function () {
  var slugs = location.pathname.split('/')
  if(slugs[2]){
    this.herepath = '../../'
  }else if(slugs[1]) {
    this.herepath = '../'// thisが必要
  }else{
    this.herepath = './'// thisが必要
  }
},

もしくは

// created関数とdata関数を削除しておく
computed {
  herepath: function(){
    var slugs = location.pathname.split('/')
    if(slugs[2]){
      return '../../'
    }else if(slugs[1]) {
      return '../'
    }else{
      return './'
    }
  }
}

一応試してみました
https://jsfiddle.net/oligin/exrjk8f6/

Comments

[holic]

oligin様
attributesはバインディングさせるとは、目からウロコです。
dataで設定した「herepath」をcreatedで関数名みたいに使えるんですね。
vueの大変勉強になりました。
ありがとうございます。