monteecristoo’s blog

https://twitter.com/irakaarozo

Vue packages version mismatch: が出たら…

環境:VueJS within Laravel

npm run dev

→  

Vue packages version mismatch:

- vue@2.x.x
- vue-template-compiler@2.x.x

yarn.lockが原因???

参考:

github.com

yarnを使ったことが無いので詳細は分からないが

  1. npm install yarn -g
  2. yarn upgrade

で依存関係をupdateしたら正常動作に戻った。

Vue-infinite-loading error: [Vue warn]: Property or method "recommend" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Vue-infinite-loadingでv-forのpropertyにエラーが出る場合

 

 <p v-for="(recommend, key) in list">

  <div id="recommend">

    <span v-text="recommend"></span>

  </div>

</p>

<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading>

余分な<div>があるとエラーが出る。

 

解決方法:

 <p v-for="(recommend, key) in list">

   <span v-text="recommend"></span>

</p>

<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading>

vue-router with dynamic router-link

vue-routerのrouter-linkを使ってdynamicなlinkの生成

 方法①

@app.js

const routes = [

  { path: '/user/:userName', component: Profile,
    children: [
      {
        path: '', component: Activity,
      },

      {  
        path: 'follow', component: Follows
      },

      {
        path: 'activity', component: Activity
      }  
    ]
  },

 

@componet

<router-link :to="'/user/' + user.name"><router-link>

 

方法② named-routerを使う

@app.js

const routes = [

  { path: '/user/:userName?', component: Profile,
    children: [
      {
        path: '', component: Activity, name: 'activity'
      },

      {  
        path: 'follow', component: Follows
      },

      {
        path: 'activity', component: Activity
      }  
    ]
  },

 

@componet

<router-link :to= "{ name: 'activity', params: { userName: user.name } }">
</router-link>

 

router-linkのparamのuserNameは通常定数にしないとchromeのコンソール上下記のエラーが出る

app.js:65434 [vue-router] missing param for named route "activity": Expected "userName" to be defined

これを消すにはapp.js側のparameterである:userNameに?を付けてオプショナル扱いにする。

方法②には問題点がある。

/user/userNameでデフォルトでcomponentのActivity.vueを表示させたい場合、

child pathの''にActivityを登録するため

このrouter-linkを辿ると/user/userName/と末尾に/が余分についてしまう。

UI Elements

www.nxworld.net

blog.8bit.co.jp

tympanus.net

Bootstrapで使えるjQueryプラグイン | ENTEREAL

 

metismenu

github.com

.metismenuが二つあると片方がバグる

 display: none してもダメ

Laravel5.4 ORMにexternal functionを付与

例えばApp\Userに外部からfunctionを付与したい場合

@Http直下に以下を設置

@Http\ExternalFunc\Greeting.php

<?php
namespace App\ExternalFunc;

 

ExternalFunction Greeting
  {
    public function Hello()
    {
      return "Hello friends";
    }
  }

上記のfunctionをApp\Userに登録

use App\ExternalFunc\Greeting;

 

class User extends Authenticatable
  {
    use Greeting;

 

これで例えばtinkerから

$user = App\User::find(1);

>>> $user->Hello()
=> "Hello friends"

 

参考:

www.youtube.com

VueJS within Laravel dynamic image binding @nested route

hoge.vue

<img :src='user.avatar' >

 

<script>

   export default {

  computed: {
    user() {
      return this.$store.state.user.user;
    }
  },

上記でdynamicにimageを切り替えられるが、

サブドメインのrouteを定義した場合、

vue-router経由で該当ページまで表示させた場合とページのリロードで表示させた場合で起点となるURIが違うため<img src="">のpathが食い違いエラーが出る

対処:

stackoverflow.com

stackoverflow.com

 

check user relationship

 

#15 

parent

f:id:monteecristoo:20170605192758j:plain

child

f:id:monteecristoo:20170605192802j:plain

server-side

f:id:monteecristoo:20170605193324j:plain