Есть ли способ привязать атрибут, когда этот атрибут уже указан?

Question

Я пытаюсь использовать Vue.js в приложении ASP.NET Core.У меня есть определенные помощники по тегам, которые добавляют собственные атрибуты HTML, и в некоторых случаях мне нужно добавить v-bind к тому же атрибуту.Тем не менее, когда я делаю это, явно определенный атрибут всегда побеждает v-bind.Например:

<span v-bind:id="foo"></span>

В обычном элементе Vue выглядело бы примерно так:

<span id="foo"></span>

Довольно простой материал.Однако, скажем, помощник по тегам добавляет свой собственный id, поэтому обработанный HTML до Vue будет выглядеть так:

<span id="bar" v-bind:id="foo"></span>

Когда Vue обрабатывает это, результат будет:

<span id="bar"></span>

Конечно, это довольно очевидный крайний случай.Если бы все кодировалось вручную, вы бы никогда не включили оба.Тем не менее, похоже, что должно быть какое-то значение для переопределения v-bind.Я что-то упускаю, или у кого-то есть какие-нибудь яркие идеи, как я могу обойти это?

РЕДАКТИРОВАТЬ

Извините, ребята.Я думаю, я не сделал это так ясно, как следовало бы.

1. id вот только пример.Это не CSS вещь.Я не могу "просто использовать class, вместо этого".Мне нужно иметь возможность привязать к необходимому атрибуту.

2. Проблема в том, что я не контролирую входящий атрибут. Мой реальный код не имеет атрибутапросто v-bind:attribute.Помощник по тегам добавляет атрибут в дополнение к моему v-bind, и я просто хочу, чтобы мой v-bind имел приоритет, а не сам атрибут.

Answer 1

Ваш вопрос в основном сводится к следующему: некоторые серверные приложения отображают тег HTML внутри шаблона Vue, который имеет явно заданный атрибут и v-bind для одного и того же атрибута.Неважно, что создает этот код, поэтому вопрос на самом деле не относится к ASP.NET Core, важно только то, что один и тот же атрибут используется дважды.И теперь вы хотите, чтобы Vue заменил явно установленный атрибут его связанным значением.

Это фактически то, что Vue будет делать, когда элемент уже определяет атрибут, и у него есть какое-то значение для привязки к этому элементу.То же самое относится и к компонентам, где документация даже объясняет это некоторым образом .В этом разделе также объясняется слияние значений, которое происходит для некоторых атрибутов class и style:

Для большинства атрибутов значение, предоставленное компоненту, заменит значение, установленное компонентом.Так, например, передача type="text" заменит type="date" и, вероятно, сломает его!К счастью, атрибуты class и style немного умнее, поэтому оба значения объединяются, и получается окончательное значение: form-control date-picker-theme-dark.

В любом случае, если вы запустите этот фрагмент, вы можетеобратите внимание, что Vue действительно заменяет значение, которое было первоначально установлено в значении, когда оно связывает значение:

var app = new Vue({
  el: '#app',
  data: {
    foo: 'baz',
  },
});

// show rendered HTML
document.getElementById('pre').addEventListener('click', function() {
  this.textContent = app.$el.innerHTML;
});

  Foo bar baz


(Click here to show the innerHTML of the app)