avoriaz
avoriaz copied to clipboard
$attrs and inheritAttrs
With Vue 2.4 inheritAttrs has been added and I'm trying to figure out how to get tests to make sure that it works correctly. Here is a simple example of what I'm trying to do:
Component template:
<template>
<div>
<label :for="inputId" ref="label">{{label}}</label>
<input type="text"
v-bind="$attrs"
:id="inputId"
:value="lazyValue"
ref="input">
</div>
</template>
Great, now attributes not listed as props go to the input as expected when I use it.
Is there any way to actually add other attributes in the mount function to test it? That way if v-bind="$attrs" somehow gets messed up the tests will fail so we know about it.
const wrapper = mount(inputComp, {
propsData: {
label: 'Label Test',
id: 'input1',
name: 'inputName', // doesn't work here
},
attrs{} // something like this?
});
// Can I set it like this somehow?
wrapper.vm.$attrs.name = 'inputName';
Any help would be appreciated
I've added this in 2.5.0
You can make attr available on the vm using the attrs
option.
const wrapper = mount(inputComp, {
attrs: {
anAttribute: 'some value'
}
})
Can you post a component and a test so I can see how you're using it?
Seems to be mostly working. It would be nice if it worked like the domProps
and attrs
in the render function data object. But I don't know how hard/possible that is for you.
Here is the component I'm working on: https://github.com/rei/rei-cedar/blob/feature/vue-update/src/components/input/cdrInput.vue
Here are the tests for it so far: (some aren't working still) https://github.com/rei/rei-cedar/blob/feature/vue-update/src/components/input/tests/cdrInput.spec.js
Ah, yes that's a good point. Right now I'm just adding it on to the vm directly before mounting.
I'll add it for you at some point over the next few days 😄