47753


この質問はマルチポストです。  
スタックオーバーフローはマルチポスト禁止ではないということなので、質問させて頂きます。  
元の質問はこちらです。↓  
<https://teratail.com/questions/141695>

* * *

現在、こちらのvue.js用の、配列をドラッグ&ドロップして並び替えるモジュールを使っております。↓

<https://github.com/holiber/sl-vue-tree>

しかしこちらのモジュール、配列の中のオブジェクトが持つ"関数"が、ドラッグ&ドロップ時に消えてしまいます。  
それは、自分が以前したこちらの質問↓によって判明致しました。

<https://teratail.com/questions/140995>

そこで、モジュールの修正を今やろうとしてます。

今、自分のgitにフォーク、さらにそれをローカルにクローンし、ソースツリーでgit管理できてる状態です。  
初めてフォークしました。

次に編集してから、npm run buildし、新しくできたsl-vue-treeのモジュールを、プッシュしました。

sl-vue-treeは以下のように編集しました。

こちらのモジュールを使い↓  
<https://www.npmjs.com/package/clone>

[code]

    var clone = require('clone');
    
    copy(entity) {
        return clone(entity)
    },
    
[/code]

そして自分が開発している環境(vue-cli3.0)のpackage.jsonを

[code]

    "dependencies": {
            "sl-vue-tree": "git+https://github.com/my-name/sl-vue-tree#master",
    
[/code]

このように変えました。

そしてnpm installをしました。

しかし開発環境で npm run serveより起動してみると、  
ちゃんと関数ごとディープコピーはされていたのですが、以下のコンソールエラーが出てしまいました。

Invalid default value for prop "multiselectKey": Props with type Object/Array
must use a factory function to return the default value.

found in

---> at src/sl-vue-tree.vue

このエラーについて調べてみたのですが、

<https://github.com/zuobaiquan/vue/issues/4>

こちらの記事を見る感じ、関数はアロー関数にしなくてはいけないのでしょうか。  
ただ、自分は関数を含んだオブジェクトのpropは他の箇所で普通にやっております。

質問したいこととしては、

1.このコンソールエラーをどうやって消すか。  
2.元のライブラリ(sl-vue-tree)にプルリクというのをしてみたいが、上のような他のライブラリを使う方法でプルリクしてもいいのか。

です。  
よろしくお願いします。


CC BY-SA 4.0
2018-08-21T05:00:37.687
47687
2018-08-23T05:58:27.540
2018-08-21T05:33:13.203
29725
29725
question
javascript html5 typescript vue.js
vue.js sl-vue-tree モジュールの修正


> しかしこちらのモジュール、配列の中のオブジェクトが持つ"関数"が、ドラッグ&ドロップ時に消えてしまいます。

[sl-vue-tree](https://github.com/holiber/sl-vue-
tree)というモジュールのREADMEを見てみましたが、以下のように `serializable` とあるのでこれは仕様と思われます。

[code]

    data?: TDataType; // any serializable user data
    
[/code]

仕様を変更してはいけないわけではありません。特に上位互換性が保てるならば。  
しかし、現状なぜこの仕様になっているのかは理解した上で変更した方がよいでしょう。

Vueに詳しくないのでここからは想像ですが、そもそもVueの仕様か慣習により、データ（Vueインスタンスの `data`
プロパティ）には関数オブジェクトを含めないことになっているからではないでしょうか。  
まずは、Vueのデータに関数オブジェクトを保存してよいものなのか確認した方がよさそうです。


CC BY-SA 4.0
2018-08-22T04:59:14.650
47719
2018-08-22T04:59:14.650
3054
47687
answer


英語版ほスタックオーバーフローで教えてもらいました。  
報告が遅れてしまい、申し訳ございません。

<https://stackoverflow.com/questions/51958950/error-message-props-with-type-
object-array-must-use-a-factory-function-to-retu>

[code]

    multiselectKey: {
    type: [String, Array],
    default: function () {
      return ['ctrlKey', 'metaKey']
    },
    validator: function (value) {
        let allowedKeys = ['ctrlKey', 'metaKey', 'altKey'];
        let multiselectKeys = Array.isArray(value) ? value : [value];
        multiselectKeys = multiselectKeys.filter(keyName => allowedKeys.indexOf(keyName ) !== -1);
        return !!multiselectKeys.length;
      }
    },
    
[/code]

sl-vue-tree.jsの上の部分をこのように変更することで直りました...。  
理屈はあまりよく分かっておりませんが...。


CC BY-SA 4.0
2018-08-23T05:58:27.540
47753
2018-08-23T05:58:27.540
29725
47687
answer