0

私はvue-selectライブラリを使用しています: https://github.com/desislavsd/vue-select 私のアプリで。

私はそれらの多くを使用しているので、別のラッパー コンポーネントを作成したいだけですが、選択が機能しません。Vueはどういうわけか小道具を認識しません。v-select通常の小道具と作業を受け入れることができる別の再利用可能なコンポーネントを作成するにはどうすればよいですか?

これは私の選択コンポーネントです:

<template>
    <div>
        <v-select/>
    </div>
</template>

<script>
export default {
    name: "Select",
}
</script>

そして、これが私がそれを使用している方法です：

<Select as="role" placeholder="Assesor" v-model="value1" :from="roles"  :key="roles.role" />

export default {
  name: "Admin",
  components: {
    Header,
    Select
  },
  data() {
    return {
      value1: [],
      selected: {
       role: ''
      },
      roles: [
        { role: "Assesors" },
        { role: "Finance" },
        { role: "Sales" }
      ]
    };
  }
};
4

1 に答える 1

2

これは見た目よりも複雑です。カスタム コンポーネントに渡された props が内部コンポーネントに適用されることを期待していますv-selectが、Vue はそれを認識していません。他の誰かが、彼らが<div>.

v-bind="$attrs"

props は自動的に子要素に渡されません。そのためには、次のものが必要です。

<v-select v-bind="$attrs" />

v-model

これで、選択した要素に小道具が適用されます。しかし、v-modelは親から隠された機能を持つ特別なプロップであるため、特別な準備がないと適切に渡されません。v-model子に直接コーディングする必要があります。

<v-select v-bind="$attrs" v-model="model" />

計算セッター

親は小道具v-modelを渡します。子の で使用するためvalueに、カスタム要素 (私はそれを と呼んでいます) で計算されたセッターを作成します。modelv-model

computed: {
  model: {
    get() { return this.$attrs.value },
    set(val) { this.$emit('input', val) }
  }
}

とを使用したカスタム ラッパー コンポーネントを使用した更新されたデモを次に示します。selectedas="role::role"

于 2020-12-20T11:36:13.777 に答える