Nuxtでカスタムディレクティブの引数にdataのオブジェクト`elements[0].dScroll`の中身の`50`を渡したい

Question

前提・実現したいこと

v-scroll:elements[0].dScroll="activeScroll"で、
ディレクティブの引数にdataelements[0].dScrollの中身の50を渡したいのに、
elements[0]という文字列が渡ってしまう。

発生している問題・エラーメッセージ

console.log(binding.arg);で引数を確認すると、
elements[0]と表示される。

該当のソースコード

pages/Scroll.vue

<template lang="pug">
section.sample-scroll
  p.centered Scroll me
  div.box(
    v-scroll:elements[0].dScroll="activeScroll"
  )
    transition(name="text")
      p.text(v-if="elements[0].isActive") {{elements[0].text}}
</template>
<script>
export default {
  name: "Scroll",
  components: {},
  data() {
    return {
      isActive: false,
      elements: [
        {
          isActive: false,
          dScroll: 50,
          text:
            "本居宣長は享保15年（1730年）6月伊勢国松坂（現在の三重県松阪市）の木綿仲買商である小津家[10]の次男として生まれる。"
        }
      ]
    };
  },
  methods: {
    activeScroll(evt, el, arg) {
      if (window.scrollY > arg) {
        this.isActive = true;
        el.setAttribute("style", "opacity: 1;");
      } else {
        this.isActive = false;
        el.setAttribute("style", "opacity: 0;");
      }
    }
  }
};
</script>

plugins/scroll.js

import Vue from "vue";

Vue.directive("scroll", {
  inserted(el, binding) {
    console.log(binding.arg);
    let f = function(evt) {
      let arg = binding.arg ? binding.arg : 0;
      if (binding.value(evt, el, arg)) {
        window.removeEventListener("scroll", f);
      }
    };
    window.addEventListener("scroll", f);
  }
});

補足情報（FW/ツールのバージョンなど）

Nuxt.js バージョン2.2.0

Answer 1

Vue.js 2.6.0以降なら動的引数が使えます。

v-scroll:[elements[0].dScroll]="activeScroll"

Comments

[mogataro]

ご回答いただきありがとうございます。
まさに求めていた方法です。
今年の2月に新バージョンが出ていたのですね！
とはいえ、公式ドキュメントに記載されていたのに見つけられなかったのは不甲斐ないです。

Answer 2

アンチパターンかもしれませんが、参考までに、

<template lang="pug">
section.sample-scroll
  p.centered Scroll me {{ elements[0].dScroll }}
  div.box(
    :class="{scrollActive: isActive}"
    v-scroll:elements[0]="activeScroll"
  )
    transition(name="text")
      p.text(v-if="elements[0].isActive") {{elements[0].text}}
</template>
<script>
export default {
  name: "Scroll",
  components: {},
  data() {
    return {
      isActive: false,
      elements: [
        {
          isActive: false,
          dScroll: 50,
          text:
            "本居宣長は享保15年（1730年）6月伊勢国松坂（現在の三重県松阪市）の木綿仲買商である小津家[10]の次男として生まれる。"
        }
      ]
    }
  },
  created () {
    if (process.browser) { 
        window.addEventListener('scroll', this.scroll)
    }
  },
  destroyed() {
    if (process.browser) { 
        window.removeEventListener('scroll', this.scroll)
    }
  },
  methods: {
    scroll(){
        return window.scrollY
    },
    activeScroll(evt, el, arg) {
      const argValue = 'this.' + arg
      const scrollValue = eval(argValue).dScroll
      const scrollY = this.scroll()
      if (scrollY > scrollValue) {
        this.isActive = true
      } else {
        this.isActive = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
    opacity: 0;
}
.box.scrollActive {
    opacity: 1;
}
</style>

v-scroll:elements[0].dScrollのelements[0].dScrollが文字列で受けとられてるので、evalで文字列から式に直してあげてます。

Comments

[mogataro]

ご回答いただきありがとうございます。
勉強になりました。
javascriptのグローバル関数にも詳しくならないといけませんね。