v-bind="$attrs" and problems with "value" attribute for multi-checkboxes

Version

2.5.16

Reproduction link

https://codepen.io/anon/pen/aYqoYL?editors=1010

Steps to reproduce

• Check the checkbox
• See that the value is set to “null” even though the input element has its value (correctly) set to “foo”

What is expected?

• The value passed through “$attrs” should be the checkbox’s value used

(or, the value never hits the DOM element, the fact that it is present on the DOM element but isn’t used in the model is a conflict IMO)

What is actually happening?

• Null is set

[emanuelmutschlechner]

I get your point, but I’m not sure if this is a bug or not. We need some feedback from the core team.

My solution is partly based on this example code, where value is bound explicit and used with disabled attribute inheritance. source

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` merges objects together to form a new object
      return Object.assign({},
        // We add all the listeners from the parent
        this.$listeners,
        // Then we can add custom listeners or override the
        // behavior of some listeners.
        {
          // This ensures that the component works with v-model
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

[pearofducks]

@emanuelmutschlechner - please read my previous response. With $attrs this shouldn’t be necessary. I’m pretty confident this is a valid bug, but I appreciate you trying to help.