web-dev-qa-db-ja.com

マージVue小道具をデフォルト値で

Vueコンポーネントにデフォルト値を持つオプションプロップがあります。

export default {
  props: {
    options: {
      required: false,
      type: Object,
      default: () => ({
        someOption: false,
        someOtherOption: {
          a: true,
          b: false,
        },
      }),
    },
  },
};

Optionsオブジェクトがpropとしてコンポーネントに渡されると、デフォルト値が置き換えられます。たとえば、渡された場合{ someOption: true }、optionsオブジェクトにはその値のみが含まれるようになりました。

オブジェクト全体を置き換えるのではなく、オブジェクトの一部を渡し、デフォルト値を指定された値でオーバーライドするにはどうすればよいですか？

javascriptvue.jsvue-component
7
Mikko

最近同様の問題が発生し、Object.assignを使用しました。これがmozillaのドキュメントです https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

ケースの具体的な使用法は次のようになります。

props: {
 options: {
  required: false,
  type: Object,
  default: () => ({}),
 },
},
data(){
  mergedOptions:{},
  defaultOptions:{
    someOption: false,
    someOtherOption: {
      a: true,
      b: false,
    },
  }
},
mounted(){
  //you will have the combined options inside mergedOptions
  Object.assign(this.mergedOptions,this.defaultOptions,this.options)
}

これを行うことにより、小道具を介して渡されたプロパティのみをオーバーライドします。それが最も効率的な方法かどうかはわかりませんが、非常に理解しやすく、きちんとしています:)

したがって、小道具:options={someOption:true}として渡すと、マージされたオプションは次のようになります。

{
 someOption: true,
 someOtherOption: {
  a: true,
  b: false,
 },
}

編集：データを反応させる必要がある場合は、計算する必要があるかもしれません。

  computed: {
    mergedOptions(){
      return {
       ...this.defaultOptions,
       ...this.options
      }
    }
  }
14
Cristi Jora

実際には、コンポーネント内の小道具を変更する必要はありません。そうした場合、親/子コンポーネントの一方向のデータフローが中断され、コードは何が何に影響を与えているかを推論するのが難しくなります。

Vue docsから右に持ち上げると、正しい解決策は、（1）初期小道具を使用するか、（2）計算値を使用することです。これにより、アプリは反応し、親コンポーネントを尊重できます。安らかに休んで足を蹴り上げることができます:)

どちらのソリューションも、テンプレートがオプションにoptsを使用することを前提としています。

解決策1：最初の小道具を使用する（デフォルトとオプション）:

props: ['options', 'defaults'],
data: function () {
  var opts = {}
  Object.assign(opts, this.defaults, this.options)
  return { 
    opts: opts
  }
}

解決策2：コンポーネントが小道具の変更に反応できるように、計算されたプロパティを定義します：

props: ['options', 'defaults'],
computed: {
  opts: function () {
    let opts = {}
    Object.assign(opts, this.defaults, this.options)
    return opts
  }
}

親コンポーネントが入力小道具を変更した場合、コンポーネントが適切に反応できることを簡単に考えてみてください。

1
Nick Steele