v-bind:name not working when name attribute is present

xavier83ar commented 2 years ago

Vue version

3.2.39

Link to minimal reproduction

https://sfc.vuejs.org/#eNpFkL1OxEAMhF/FuAlIJBFtyJ1ER0VL4yYkTi6n7I/Wm0Mo2nfHm7uDzjMezSd7wzfvq8vK2GArfZh9BOG4+iPZ2XgXImwQeIQEY3AGCo0WZMn2zkoEIxMc8v6xeOdlcfDpwjI8FE+v98TwYzsz9x+d4VuS0LBINzFhjrX1FatAFZGNX7rIqgDa08tx23ZISm2tandn69cIWssHwqHLAyE0d+MfqO6lNG7gRX1tIdSCtv5j4DNebyxN56uzOKtf2DKDbgshbGB3sqe3Z014itFLU9cy9vl3Z6lcmGqdqrDaOBuuWEz5Fdy3cNBiwlyRyCZMv12nfyI=

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)

xavier83ar commented 2 years ago

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.

posva commented 2 years ago

Duplicate of https://github.com/vuejs/core/issues/2059

posva commented 2 years ago

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==

xavier83ar commented 2 years ago

Cool, thank you @posva and sorry for the duplicated issue, I searched before creating it, but I was searching wrong, I thought it only affected inputs...

vuejs / core