Условный балл в Вуэйсе

Question

Я отображаю список названий магазинов в VueJS, некоторые из них имеют свойство url, а некоторые нет. Если заголовок имеет URL, я хочу добавить свойство href:

<div v-for="(store, index) in stores">
  <span v-if="store.link"><a :href="store.link" target="_blank">{{ store.title }}</a></span>
  <span v-else="store.link">{{ store.title }}</span>
</div>

Это работает, но код выглядит дублированным. Есть ли способ еще больше упростить код?

Answer 1

вы можете использовать компонент тег:

var app = new Vue({
  el: '#app',
  data () {
    return {
      stores: [
        {title:'product1',link:'/products/222'},
        {title:'product2'},
        {title:'product3',link:'/products/333'},
        {title:'product4'}
      ]
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div v-for="(store, index) in stores">
    <component :is="store.link?'a':'span'" :href="store.link || ''" target="_blank">{{store.title}}
    </component>
  </div>
</div>

Answer 2

Я бы удалил первый элемент span, так как в этом нет необходимости. Кроме того, v-else не нуждается в условном выражении (это не v-else-if):

new Vue({
  el: '#app',
  data: {
    stores: [
      { link: 'foo', title: 'foo-text' },
      { title: 'bar-text' } 
    ]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(store, index) in stores" :key="index">
    <a v-if="store.link" :href="store.link" target="_blank">{{ store.title }}</a>
    <span v-else>{{ store.title }}</span>
  </div>
</div>