v-bind:name not working when name attribute is present
Vue version
3.2.39
Link to minimal reproduction
Steps to reproduce
- Add an input with static name attribute and a dynamic name (v-bind:name) attribute, binded to a component reactive property (data, props, computed, etc.).
- Inspect the input name using browser devtools or any other tool or mechanism (like sending and catching a post request).
What is expected?
The input name to have the same value of the property binded.
What is actually happening?
It keeps the static name, ignoring completely v-bind:name
System Info
System:
OS: Linux 5.15 KDE neon 5.25
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 2.26 GB / 15.37 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
Browsers:
Chrome: 105.0.5195.125
Firefox: 104.0
npmPackages:
vue: ^3.2.39 => 3.2.39
Any additional comments?
This was working on vue 2. (https://codesandbox.io/s/vue-2-playground-forked-4yus18?file=/src/App.vue)
I want to add a bit more context, because at a first glance it doesn't make any sense to add both name
and :name
attributes to input element.
I'm using vue within a php framework, which is the responsible for rendering input elements, like this:
<?= $this->Form->hidden('horarios.hora_inicio', [
':name' => '`horarios[${key}][hora_inicio]`',
':value' => 'item.horaInicio',
]) ?>
So, while I can add the :name
attribute, I cannot prevent the helper function to add a name
attribute by default.
Another thing worth mentioning is that I'm using the runtime template compiler, so vue compiles templates in the browser.
Finally, I was thinking about this and I guess this is not a bug, and likely is the expected behavior, but as it's different how it behaves in vue 2, it made me think it's a bug in the first place.
Duplicate of https://github.com/vuejs/core/issues/2059
The static attribute takes precedence but you can inverse the order or specify the .attr
modifier: https://sfc.vuejs.org/#eNp9kL1OxDAQhF9l2SYgXWLRhtxJdFS0NG5MspfLKf7R2glCUd6dde74EUhU9s6MvrF3wccQqnkirLGJLQ8hQaQ0hYN2gw2eEyzAdIQVjuwtFBIttNOu9S4msLGHffZviycaRw8vnsfuprh7+Ex0787YoX02lq5JjZZiND1pzLFGXWqlUIZENowmkUwAzen+sCxbybo2SqZNHVyYEoBwaa+xM/miEep8ViYlzup3rVgwl9Z3NIohMI3CadRXFe7w8tXSmlCdo3eyjCVX6asRNdawKVmTFeRZ4ymlEGul4rHNKzzHynOv5Fbx5NIgr6Foy1f2b5FYwBp3PxhKxJm4ZHIdMfF/zF/RP9yMXbVbcf0AbMmgfg==