monteecristoo’s blog

https://twitter.com/irakaarozo

VueJs: v-if 注意事項

v-ifによる条件分岐で大規模なList Renderingはやらないほうがいい。

v-if の component DOM の destroyによるコストが大きくなるから。

infinite scrollを含んだcomponentにv-ifを使った結果、致命的なパフォーマンスissueが発生した。

一つのcomponentでconditional rendering せずに、別component化してkeep-aliveを使うべきか???

 

.ref

https://vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components

vue-router In-Component Guards

vue-router@3.0.6

 

beforeRouterEnter(to, from, next) {

next(vm => {

                         console.log(vm)

vm <<<< router-viewを使っている場合、最終的にrouter-viewで表示されるcomponentのインスタンス

})

 

従って、router-view と In-Component Guardsを使えば別のcomponentのdataを操作したりメソッドを呼び出したりできるが自身のデータ変更やメソッドを事前に呼び出せないのでIn-Component Guardsの主旨と違う

 

router-view と In-Component Guards は相性が悪い???

Laravel formData validation

formData に image を入れてデータを送る場合

@FrontEnd

  const formData = new FormData()

       formData.append("image", BLOB_IMAGE_DATA)

       axios({
              method: 'post',
              url: 'SERVER_URL',
              data: formData,
              config: { headers: {'Content-Type': 'multipart/form-data' }}
       })
       .then(function (response) {
              //handle success
              console.log(response);
       })
       .catch(function (response) {
              //handle error
              console.log(response);
       });

 

@BackEnd

       use Illuminate\Http\Request;

 

       public function upload(Request $request) {

              $this->validate($request, [
                     'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
              ]);

 

https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data

Scroll の up, down を検知する

以下、vuejs syntax に従って書くと...

mounted() {

  window.addEventListener('scroll', this.wheelDelta)

},

data() {

  return {

    currentPosition: 0,

    previousPosition: 0,

    scrollDelta: 0

  }

},

methods: {

  wheelDelta() {

    this.currentPosition = document.documentElement.scrollTop

    if(this.currentPosition > this.previousPosition) {

      this.scrollDelta = 1

    } else {

      this.scrollDelta = 0

    }

    this.previousPosition = this.currentPosition

  }

 

参考:

https://stackoverflow.com/questions/4670834/capturing-the-scroll-down-event/46339008#46339008

 

https://stackoverflow.com/questions/4670834/capturing-the-scroll-down-event/46339008#46339008

VueJS: List rendering した item を削除

<div v-for="(item, index) in items">

  <button @click="deleteItem(item, index)">

data() {

  return {

    items: ['test', 'hi', 'hey']

method: {

  deleteItem(item, index) {

     axios.post('delete', item) {

       // server 側にデータをpost

     }

     this.items.splice(index, 1)

       // client 側のlist を更新

 

さらに list rendering が component を利用したものの場合、index を props として子component に pass する。