Как пробросить v-model в дочерний компонент?

Question

[Vlad Osadchyi]

Использую вот этот плагин https://github.com/euvl/vue-js-toggle-button и мне хотелось бы переопределить дефолтные значения props.
По примеру с интернета сделал вот такой компонент:

<template>
  <toggle-button v-bind="$attrs"
                 :color="color"
                 :height="height"
                 :width="width"
                 :fontSize="fontSize"
                 :labels="labels"/>
</template>

<script>
export default {
  name: 'Toggle',
  props: {
    name: {
      type: String
    },
    color: {
      type: [String, Object],
      default: '#09757A'
    },
    height: {
      type: Number,
      default: 26
    },
    width: {
      type: Number,
      default: 60
    },
    labels: {
      type: [Boolean, Object],
      default: () => {
        return {checked: 'YES', unchecked: 'NO'}
      },
    },
    fontSize: {
      type: Number,
      default: 11
    }
  }
}
</script>

Вот как я его использую внутри компонента формы:

<toggle name="alt_currency_status" v-model="alt_currency_status"/>

Но проблема в том, что значение alt_currency_status компонента формы не меняется, хотя сам тогглер переключается. Как сделать, чтобы alt_currency_status менялся.

Пример на codesandbox - https://codesandbox.io/s/vigorous-darwin-4w3wg

Answer 1

[0xD34F]

В props добавить value: Boolean,, а в <toggle-button -

:value="value"
@input="$emit('input', $event)"

Или, в <toggle-button добавить v-on="$listeners".

Comments

[Vlad Osadchyi]

спасибо :)