質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1135閲覧

vue.js で 外部 components のコンフィグを変更するには?

ma7ma7pipipi

総合スコア85

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/02/19 05:56

編集2019/02/20 02:14

https://github.com/stackjie/vue-pull-to

のライブラリを使っています。

そこで config.js を直接いじればコンフィグを変更できるのですが、
コンポーネント読み込み時に config を変更するにはどのようにすればいいか
教えて下さい。

Reflesh.vue

<template> <div> feafaw <pull-to :top-load-method="refresh"> <ul v-for="item in dataList"> <li>{{ item }}</li> </ul> </pull-to> </div> </template> <script> import PullTo from 'vue-pull-to' const TOP_DEFAULT_CONFIG = { pullText: '引っ張って更新' } export default { name: 'example', components: { PullTo//ここらへんでどうにかして設定を変更したい }, data() { return { dataList: [ 'たろう', 'じろう', 'はなこ' ] } }, methods: { refresh(loaded) { alert("再読込完了"); loaded('done'); // fetchDataList() // .then((res) => { // this.dataList = res.data.dataList; // loaded('done'); // alert("読み込みok"); // }) } } } </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

API Docs の「props」に、top-config botttom-config という項目がありますので、一般的なVueコンポーネントのように、データバインディングすれば可能です。

なお、top-config botttom-config それぞれについて、Defaultdefault config と記載がありますので、データバインディングしなかった場合、または、しているがすべてを設定している訳ではない場合に、ma7ma7pipipiさんの言うconfig.jsの値と統合されて使用されるようです(該当箇所

一般的に、公開されているVueコンポーネントは、Vueの作法にしたがっているはずですので、その線で見当をつけて調べてみるといいと思います。

<template> <div> <pull-to :top-load-method="refresh" :top-config="topConfig" :bottom-config="bottomConfig"> <ul v-for="item in dataList"> <li>{{ item }}</li> </ul> </pull-to> </div> </template> <script> export default { data () { return { topConfig: { pullText: 'Pull me!' }, bottomConfig: { loadingText: 'Loading...' } } } } </script>

投稿2019/02/19 12:54

編集2019/02/19 12:55
NozomuIkuta

総合スコア1260

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NozomuIkuta

2019/02/19 12:58

可能であれば、`JavaScript` や `Vue.js` などのタグづけをしていただくと、他の方が質問を探しやすくなると思いますので、お願いします。
ma7ma7pipipi

2019/02/20 02:18

ありがとうございます。 できました!
NozomuIkuta

2019/02/20 11:00

解決したようでよかったです タグ付けありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問