Vueの入力データ変換を取り扱う方法

ここでは、すべての私たちのいずれかを持っているか、またはWebアプリケーションを開発するときに実行される機能の一部です
ユーザーは値を変更することができる対話型コンポーネントを持っていますが、値を格納する方法とユーザーに提示する方法の間にいくつかの相違があります.
それは口が多かったので、具体例を使ってユースケースをよく理解しましょう.
のイメージをぼかしの量を制御するスライダを作成したいとしましょう.画像のフィルターに渡すぼかしの値は0から8ピクセルの間で、10進数値も許容します.ユーザーのためには、スライダを0と100 %の代わりに値を表示し、自分自身の変換の世話をしたい.

チェックアウトoriginal link インタラクティブなバージョンと最後にボーナスの例については)
これに取り組む一般的な方法は、入力へのすべての変更に対して呼び出されるメソッドを定義し、そのようにインスタンス変数を変更することです.

<range-slider :value="percentageBlur" @input="sliderInput" />
<img
  src="https://placeimg.com/1000/480/arch"
  :style="`filter: blur(${blur}px)`"
/>

export default {
  data() {
    return {
      blur: 0, // Value in pixels, passed to the image blur filter
      percentageBlur: 0, // Value in percentages, passed to the slider
    };
  },
  methods: {
    sliderInput(value) {
      this.percentageBlur = parseInt(value);
      this.blur = (value / 100) * 8; // Converting from 0-100 to 0-8
    },
  },
};

上記のコードは完全に細かく、それが想定されていることをしていますが、私は個人的にそれはいくつかの不便をもたらすことに気づいた.
まず第一に、コンポーネントがより複雑になるとき、より多くの方法とデータ特性で、「ぼけ論理」を扱うコードの部分は現在、コンポーネントを横切って散らばっています.データセクションに値を設定し、メソッドのセクションにコードを設定します.それは大部分のように思われないかもしれません、しかし、後で、あなたがあなたがそれを実行したかについて覚えていないとき、あなたはぼやけていることを取り扱うことをしている場所のすべてを追跡しようとしているファイルで上下にジャンプしています.
そして第二に、あなたは使用できませんv-model 入力要素に.If the range-slider コンポーネントは、ライブラリからインストールされ、それはchange イベントの代わりにinput イベントは、ドキュメントを追跡し、なぜあなたのコードが動作していない理由を参照する必要がありますv-model 自動的に設定をチェックし、右イベントをラップします.さらに、それはちょうど単一のv-model 2つの別々のものの代わりにテンプレートの引数.

計算された小道具を

上記の不都合を解決する方法は、get/set計算されたプロパティの代替構文を使用することです.
Vueドキュメントに記載されていますが、多くの開発者がこの構文を知っているか、使用していないのでしょう.
既に知っていないなら、get/setは以下のようになります.

computed: {
  myProp: {
    get() {
      // When you try to get the value this.myProp in your component
      // you will get the return of this function.
      return this.value;
    },
    set(value) {
      // When you set the value like: this.myProp = 10
      // the prop this.value will be set to 10
      this.value = value;
    }
  }
}

上記のコードは、本質的に、this.value プロップ
物事をより面白くするために、イメージのぼかしの使用事例にこの新しい知識を適用します.

<range-slider v-model="percentageBlur" />
<img
  src="https://placeimg.com/1000/480/arch"
  :style="`filter: blur(${blur}px)`"
/>

export default {
  data() {
    return {
      blur: 0, // Value in pixels, passed to the image blur filter
    };
  },
  computed: {
    percentageBlur: {
      get() {
        // Converts the 0-8 blur values to percentages
        return Math.round((this.blur / 8) * 100);
      },
      set(value) {
        // Converts the percentages to 0-8 values and assigns
        // them to the original blur
        this.blur = (value / 100) * 8;
      },
    },
  },
};

通知に違い?我々は現在、コードの1つの“ユニット”、計算されたプロパティにブレーキング変換の機能を囲むことができます.このようにすることによって、私たちはまた、v-model ディレクティブ.