Как менять определённый атрибут при отрисовке списка во vue.js?

Question

[LehaRybkoha]

Я только начинаю изучать vue и появился вопрос:
Вот к примеру можно отрисовать список с помощью v-for"item in items", а что если в этом теге li есть тег a с атрибутом href, который при каждой отрисовке должен менять свое значение?

<nav class="nav">
	<ul class="nav__list">
	  <li class="nav__item" v-for="item in items":key="item.message">
			<a href="/financeProducts.html" class="nav__item-link">{{ item.navOption }}</a>
		</li>
	</ul>
	<div class="logo">
		<a href="/index.html" class="logo-link">
			<img src="/img/logo.png" alt="Logotip" class="logo-link-pic">
		</a>
	</div>
</nav>

Answer 1

[Игорь Стасюк]

LehaRybkoha Ну для начала , стрёмная конструкция
href="/financeProducts.html"

Я бы предложил так

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item" v-for="item in items":key="`${item.id}-navlink`">
      <router-link :to="item.link" class="nav__item-link">{{ item.navOption }}</router-link>
    </li>
  </ul>
  <div class="logo">
    <router-link to="/" class="logo-link">
      <img src="/img/logo.png" alt="Logotip" class="logo-link-pic">
    </router-link>
  </div>
</nav>

И почитайте наконец-то документацию https://router.vuejs.org/ru/api/#router-link
Вы все таки делаете SPA, а не стандартный сайт

Comments

[LehaRybkoha]

Спасибо!

[LehaRybkoha]

А ещё вопрос, какой нормальный размер основного файла на выходе? Я инициализировал vue и у меня аж 600кб добавилось, это норма? Просто я читал, что должно быть 20кб только

[Михаил]

LehaRybkoha, в dev режиме?

[LehaRybkoha]

Михаил, именно

[Михаил]

LehaRybkoha, тогда чему вы удивляетесь?

[Игорь Стасюк]

LehaRybkoha, обрезает только в prod. И почитайте про оптимизацию во vue если хотите минимальный весь исходного файла

[LehaRybkoha]

Михаил, не сталкивался с таким большим размером, потому и удивляюсь)

Answer 2

[Александр]

<a :href="выражение">