Vue.jsのcomputedで引数を使いたい

Vuejsで便利なcomputedですけど、引数取りたいって思うタイミングがあり検証。
ちなみに引数とりたいタイミングは、ループでテーブル作成してるときとかです。

lambda式(アロー関数)を使えばできました。

<template>
  <div id="app">
    <p>sample('a'):{{sample('a')}}</p>  // <- 使用箇所
    <p>sample('r'):{{sample('r')}}</p>  // <- 使用箇所
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    sample() {
      return r => r === "a";   // <-  ここでアロー関数を実行
    }
  }
};
</script>

出力結果はこちら。

sample('a'):true

sample('r'):false

computed特有のキャッシュ等が効かないらしいけど、methodとwatchでやるんだったらあんまりかわらなくて、computedですっきりかけた方がいいかなと思うので採用します。

Vue.jsでファイルをdrag and dropする

Vue.jsでファイルのdrag and drop をするときにdomイベントをどうやって渡すんだ?ってなったので、メモ。

公式のドキュメントに書いてあったので イベントハンドラ でそれを参照する。

$event を使うことででDOMイベントを渡すことができる。

サンプルコードは下記

<template>
  <div>
      <h1>drag and drop</h1>
            <label></label
      <div class="drop_area" @dragover.prevent @dragleave.prevent @drop.prevent @drop="drop($event)">

      </div>
  </div>
</template>

<script>
  export default {
    name: 'main-page',
    data () {
      return {}
    },
    methods: {
      drop (event) {
        // 処理を書く
      }
    }
  }
</script>

<style>
.drop_area {
  border: 5px solid gray;
  background: gray;
  width:  400px;
  height: 400px;
}
</style>


ブラウザはファイルをdrag and drop するとデフォルトの処理が発火してしまうので、下記を定義しておけば、それを抑止して、カスタムな処理ができるようになる。

@dragover.prevent @dragleave.prevent @drop.prevent

うん。簡単。