@posvaで計算されたプロパティは再利用できません。

ほとんどすべてがミックスインを介して再利用可能です。
ミックスインを生成する関数を使用できます。 このようにして、
動的に計算されたプロパティ。 私は今その例をフィドルに置くことはできません
しかし、私はそれをできるだけ早くします。
ただし、入力が持つ非常に一般的なユースケースであることに同意します
適用された変換。 適切なAPIまたは少なくとも
ガイドが必要です

2016年9月13日火曜日、18：48FranciscoLourenço、 notifications @ github.com
書きました：

@posvahttps ://github.com/posva計算されたプロパティは再利用できません。

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/vuejs/vue/issues/3666#issuecomment -246746524、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AAoicf33lCvETQc9LBQ5GGZ93ExPcLS_ks5qptPegaJpZM4J7vQ0
。

ほとんどすべてがミックスインを介して再利用可能です。
ミックスインを生成する関数を使用できます。 このようにして、
動的に計算されたプロパティ。 私は今その例をフィドルに置くことはできません
しかし、私はそれをできるだけ早くします。
ただし、入力が持つ非常に一般的なユースケースであることに同意します
適用された変換。 適切なAPIまたは少なくとも
ガイドが必要です

言い換えると、計算されたプロパティは再利用できません。 回避策としてファクトリ関数とミックスインを使用できますが、使いやすさと読みやすさは比較できません。

私のプロジェクトでは、この機能が非常に必要だったため、推奨されるカスタム入力アプローチを使用しました。

InputCustom.js

define(function () {
  return Vue.extend({
    data: function () {
      return {
        focused: false
      };
    },
    template: '<input @focus="onFocus" @blur="onBlur" @input="onInput" @change="setDisplayValue">',
    props: ['value'],
    watch: {
      value: function () {
        if (!this.focused) {
          this.setDisplayValue();
        }
      }
    },
    mounted: function () {
      this.setDisplayValue();
    },
    methods: {
      onInput: function () {
        this.$emit('input', this.parse(this.$el.value));
      },
      onFocus: function () {
        this.focused = true;
      },
      onBlur: function () {
        this.focused = false;
        this.setDisplayValue();
      },
      setDisplayValue: function () {
        this.$el.value = this.format(this.value);
      }
    }
  });
});

InputText.js

define(['js/InputCustom'], function (InputCustom) {
  return InputCustom.extend({
    methods: {
      parse: function (val) {
        val = val.trim();
        return val === '' ? null : val;
      },
      format: function (val) {
        return val === null ? '' : val;
      }
    }
  });
});

私の意見では、このアプローチは非常に便利であり、 .lazyを含むvモデル修飾子をまったく使用しないことにしました。

組み込みの修飾子がサポートできない、よりカスタマイズされたユースケースの場合、 @ecmelが言及したのが推奨されるアプローチです。 これについては、公式ガイドで詳しく説明します。

この機能提案のアイデアは、既存のv-modelディレクティブを利用することです。これは、すべてのinput要素ですでに機能しています。 すべてのプロジェクトで_InputCustom.js_を作成する作業を節約するには、これはすでにv-modelで行われているため、カスタム修飾子に_InputText.js_に相当するものを作成するだけで済みます。これには、必要なすべてのロジックが含まれています。ほとんどの場合変更されます。 v-modelにはすでに修飾子が付属しているという事実は、それが直感的で望ましいパターンであることを証明しています。 カスタム修飾子の作成を容易にし、カスタム要素を作成する作業を節約し、dom/modelバインディングを手動で実装する必要があるのは当然のことです。

APIの観点から理にかなっている場合は、この機能を実装しないという決定を推進している技術的な制限が何であるかを知ることは興味深いでしょう。

この問題を再開できる可能性はありますか？ 私の一般的な使用例は、入力時にフィールドのデータを自動的にフォーマットする必要があることです。「101216」を取得して「10/12/16」に変換するようなものです。 カスタムv-model修飾子を作成できると、小道具やイベントを使用してカスタム入力コンポーネントを作成する代わりにv-model.dateを記述できるため、コードが大幅に簡素化されます。

私のプロジェクトでしばらくvuejsを使用した後、この問題は実際に再開する必要があると思います。

少なくとも、 undef修飾子が必要です。

この問題を再開する必要があることに同意します。 undefが何をするのかわかりませんが、入力のトリミングされた値が空の文字列の場合に変数をnullに設定するv-model修飾子が必要です。

自分で簡単にできるようになりたいです。

これよりも冗長な機能が、たとえばhttps://github.com/vuejs/vue/issues/5194で追加されました。 外部から見ると、Vueは、反応コミュニティによって推進されている慣習や慣行を支持して、その原則のいくつかをゆっくりと妥協しているように見えます。 そもそも目立つ品質から少し外れています。 これが、反応からの移行を容易にすることを目的とした意識的な決定なのか、それとも単なる偶然なのかを知ることは興味深いでしょう。

カスタムコンポーネントの作成は問題ありませんが、 https：//github.com/text-mask/text-mask/tree/master/vue#readmeなどのサードパーティのカスタムコンポーネントを使用する場合、マスクされたものをサニタイズする簡単な方法はありません。計算されたプロパティを使用する場合を除いて、モデル値への入力。

それで、HTML標準のinput [type = date]フィールドを使用してモデルの日付型を編集したいのですが、この素晴らしく強力で拡張可能なフレームワークでは、すぐにそれを行うことはできませんか？ フィールドに日付を読み込めません。日付を選択した後、データ内の文字列で日付を上書きしてください。 このソリューションは、双方向フィルターまたは修飾子を使用して2行で記述できます。

しかし、最善の解決策は、チェックボックスやその他の標準入力フィールドの場合と同じように、ネイティブでサポートすることです。なぜ「日付」が特別なのですか？

カスタム修飾子の場合は+1。 そうしない正当な理由がない限り、簡単なことのように思えますか？

入力をマスキングし、アプリケーションで使用するために値を解析することは非常に一般的な方法であり、v-model.lazy.currency="amount"のような「シンタティックシュガー」を作成することは素晴らしいことです。

カスタム修飾子の場合は1+。
文字列に評価されるtrue|false値を持つ単純なラジオ入力があります-しかし、ブール値としてそれらが必要です-この場合、すべてのラジオ入力に対して計算されたプロパティを再実装する必要があるため、計算されたプロパティはスマートではありません。 たとえば、100個の無線入力があると、100個の計算されたプロパティになります

カスタム修飾子の場合は+1ですが、tobeiに同意します--input [type=date]は自動的に機能するはずです。

カスタム修飾子の場合は+1。

私はAngularのバックグラウンドから来て、vueから始めて、このスレッドを見ました。

VueでもAngularのパーサーやフォーマッターのようなものを持っていると本当に役立つと思います。 v-model.dateFormatのようなことをして、mm / dd / yyyyのような結果が得られれば、それは本当に素晴らしいことです。

編集： @restored18が言ったことを繰り返したようです。 あなたにも+1

カスタムvモデル修飾子の場合は+1。

私の場合、JSONで取得されたいくつかのネストされたオブジェクトをループし、（オブジェクトごとのテンプレートではなく）単一のHTMLテンプレートを使用します。 この場合、計算されたプロパティは機能しないと思いますか？

私は現在、データをフェッチおよび送信するときにサーバー形式とvモデル形式の間にカスタム変換メソッドを入れていますが、関数を渡すことができる「組み込み」のものが欲しいです。

これに+1。 2.2より前に利用可能でした。 あなたは、を介してプロパティにアクセスすることができます、

this.$vnode.data.directives

カスタムモデルの入力値が追加されて削除されましたが、非常に便利な機能であり、フレームワークに戻す必要があります。

このために+1。

カスタムvモデル修飾子は素晴らしいでしょう！

私もです

2018年も+1...

+1私の意見ではDRYコードに必要な機能です。 今のところ、入力の多いフォームに対して同じことを行うウォッチャーを10個作成する必要があります。 カスタム修飾子はすべてを解決します。

+1私はvueを始めたばかりで、すでにこれらのタイプの双方向フィルターが必要です...

+1は間違いなく必要です

+1

ほとんどのユースケースIMOに対して、このようなヘルパーを構築できます

@nickmessingは、ここで説明されている（本当に便利な）ユースケースをカバーしていません。これは、入力テキストのインプレース変更です。 常に電話のようにフォーマットしたい入力ボックスがある場合は、 <input v-model.phone="some_data">になります。 ユーザーがテキストを入力すると、自動的にフォーマットされます。

これはそのような基本的な機能のようであり、現在あるべきよりも難しいです。 この動作はフレームワークにすでに存在しますが、何らかの理由でフレームワークのみのコードに制限されています。 これを行うカスタム修飾子を追加できるようにしたいと考えています。これは、現在のフィルターやディレクティブと同じように、コンポーネントやプロジェクト間で再利用できます。

@bbughは完全に同意します、私はIBANをフォーマットすることで同様のケースを持っています、そしてそれは単にそこにv-model.iban="payment.iban"を入れるためのとても素晴らしくて退屈な方法でしょう...

@franciscolourencoおそらく誰かが、これがフレームワークによってサポートされるべきではない理由を背後に置いて、それがより明白になるようにすることができます。

カスタム修飾子の+1、この機能で達成できるユースケースはたくさんあります

私たちのアプリケーションでは、通貨をフォーマットするためのいくつかの異なる入力があり、常にセントの金額をモデルに格納しますが、入力には適切にフォーマットされたドルの金額を表示します（したがって、モデルの123456は$ 1,234.56として表示されます） <input v-model.dollars="cents" />

他のユースケースは、XSS攻撃を防ぐためにhtmlフィールドをサニタイズしてエスケープ解除することです（モデルは「 A & B 」を格納し、入力は「 A & B 」を示します） <input v-model.html="text" />

+1

+1

カスタム修飾子の場合は+1。
v-model.trim.uppercase=...のようなことができないことに本当に驚きました

+1

+1

+1

+1
ネイティブのv-model入力修飾子は素晴らしい機能です。 ここで人々が言及しているように、多くのユースケースがあります。 私が取り組んできたすべてのプロジェクトには、日付と通貨の修飾子が必要でした。

ここで問題を開く必要がありますか？ https://github.com/vuejs/rfcs

私はすでにこれを+1していますが、「今」何かが必要な人のためにメモを投げたいです

モディファイアの方がはるかに効率的ですが、計算されたゲッター/セッターフィールドを持つ透過的な入力/コンポーネントを使用して同じ効果を達成することができました。

誰かがそれを必要とするならば、私は例を共有することができます

この一見簡単な機能で考慮すべきことがたくさんあるため、これを実装しませんでした。

• 組み込みの修飾子は、実際には、さまざまなコンパイル済みコードを生成するコンパイル時のヒントです。 カスタム修飾子は、別のメカニズムであるランタイム構成を使用して定義する必要がある可能性があります。

• ランタイム構成の場合、これに対してどのような種類のAPIを公開する必要がありますか？

• 過去には双方向フィルターがありました。 双方向値変換では、双方向バインディングを安定させるために、ユーザーが非の打ちどころのないロジックを実装する必要があります。 そうしないと、エッジケースでアプリ全体が無限ループに陥るリスクがあります。

  • .numberと.trimがある理由は、これらが実際には一方向の変換であり（DOM値をコンポーネントデータに同期する場合にのみ適用される）、安定することが保証されているためです。

• コンポーネントでv-modelが使用されている場合、カスタム修飾子はどのように動作する必要がありますか？

• カスタム修飾子は、テキスト以外の入力タイプ（ radio 、 checkbox 、最も重要なのは<select>など）でどのように動作する必要がありますか？

これらの質問はすべて回答されておらず、要求が見た目よりも複雑になっています。 これが、誰かが本当にこの機能を必要としている場合、これらすべてをカバーする適切なRFCの良い候補になることに同意する理由です。 それまでは、+1を増やしても前進しません。

@rkingon https://github.com/vuejs/vue/issues/3666#issuecomment -249583603にはすでに例がありますが、異なる/優れている場合は、投稿してください。 初心者にも便利です。

@Gotterbild私はそのサンプルを見逃しましたが、Vueの新しいバージョンではかなり複雑になっています（これは事前に透過的なコンポーネントのサポートであった可能性があります）

これは私が持っている非常に単純なもので、パーセントを10進数に変換し（つまり、4.5-> .045）、その逆も同様です（「ビュー」値と「モデル」値）

<template>
    <input type="number" v-on="listeners" v-model="innerValue">
</template>

<script>

    export default {
        props: ['value'],
        computed: {
            listeners () {
                const { input, ...listeners } = this.$listeners
                return listeners
            },
            innerValue: {
                get () {
                    return (this.value) ? `${(this.value * 100)}` : ''
                },
                set (_val) {
                    const val = (_val) ? (_val / 100) : ''
                    this.$emit('input', val)
                }
            }
        }
    }

</script>

すべてのフォーカス/ブラーなどを再指定する必要がないため、これは上記よりも簡単です。

@yyx990803このトピックに関するより多くの背景情報を提供していただきありがとうございます。

私のユースケースでは、カスタム修飾子は「必要ありません」。 消費者の観点からは、vueに独自の方法を構築する方法があることは理にかなっています。 基本的に、修飾子を除いてすべてにそれがあります😄

変換ロジックを適切にカプセル化し、再利用できるものを作成する方法を見つけることはできましたが、そのようなユースケースに適切なAPIを使用することで、「ベスト-練習修飾子」。

文字列を大文字に変換する修飾子を作成しようとしていたので、ここに来ました
v-model.uppercase="username"のように作りたかった

カスタムディレクティブを使用することになりました

Vue.directive('uppercase', {
    update (el) {
        el.value = el.value.toUpperCase()
    },
})

<input type="text" v-model="username" v-uppercase>

代替手段としては、カスタムディレクティブで十分です。
または、カスタムvモデル修飾子でのみ可能なことはありますか？

@Christhofernataliusは、 v-modelが単なるディレクティブであると考えていますが、カスタムディレクティブを優先して、 v-modelを削除できませんでしたか？ このようにあなたは二度更新していませんか？

@Christhofernataliusは、 v-modelが単なるディレクティブであると考えていますが、カスタムディレクティブを優先して、 v-modelを削除できませんでしたか？ このようにあなたは二度更新していませんか？

@rkingon 2回更新されていますか？
したがって、v-modelを使用しない場合は、入力リスナーのバインドフックとバインド解除フックも追加し、ユーザー名の値を更新する必要がありますか？

編集：setterとgetterで計算されたものも2回更新されていませんか？
編集2：ウォッチャーとディレクティブのコンソールログを試しました。それぞれがキーストロークごとに1回だけ出力されます。

私はそれを試していません、ただ推測です-1つの値を更新する2つのディレクティブのアイデアは私には少し面白いと思うかもしれませんが、あなたがそれをチェックした場合、私はそれで何も悪いことはわかりません。

私のコンポーネントの回避策にも制限があります。そのため、モディファイアを引き続き使用しています。つまり、要素が必要で、レンダリング時間が長くなり、そのコンポーネントの定義方法（つまり、入力フィールド）でのみコンポーネントとして機能します。 ）vsディレクティブの力である任意のコンポーネント/要素でそれを単純に使用することさえできます。

猫の皮を剥ぐ2つの方法、オプションがあるといいですね:)

このためのRFCはありますか？

私はそうは思わない

私はそれを作成することができましたが、それは単にそのRFCリポジトリまたは何か他のものに問題を追加することを意味しますか？

https://github.com/vuejs/rfcs#what -the-process-これはあなたの質問に答えますか？

これを再開できますか？ カスタムディレクティブが機能する場合もありますが、動作がおかしい場合があります。例：

Vue.directive('number', {
  update: function(el, binding, vnode) {
    el.value = el.value.replace(/[^\d.]/g, '');
  },
});

このディレクティブを（vモデルとともに）追加し、1つおきのキーストロークで文字を非常に速く入力すると、 v-modelはel.valueと同期しなくなります。 また、受け取ったバインディングオブジェクトを変更できないため、このディレクティブ内でv-modelを「再実装」する方法はありません。

@jeankvdやり過ぎのように感じることはわかっていますが、ラッパーコンポーネントが最も信頼性が高くなります（上記の例を参照）。

ラッパーコンポーネントを使用すると、「さらに多くのことを実行」することもできます。 「数値」の例では、理想的には、vモデルは実際にはNumberになります。 あなたのアプローチでは、それはまだStringです。

空の値をカスタマイズしたい場合はどうなりますか？ 空の文字列？ ヌル？ 未定義？ -- emptyValueの小道具を渡して、そのように設定できます。

かつてはこれを支持していましたが、モディファイアには制限が多すぎて、コンポーネントを持っているだけではるかに優れていることに気づきました（少なくともimo）。