Блог

У меня есть router-link настройка, в которой path атрибут to prop иногда может быть нулевым. Это приводит к ошибке, в vue-router которой говорится, что он не может найти ‘indexOf’ null.

Я бы хотел router-link , чтобы он отображался только в том случае, если non-null для него доступно значение для перехода (очевидно). Если значение равно null , то мне не нужна ссылка для существования, или ссылка может просто использоваться в # качестве заполнителя.

Это router-link код:

 <router-link :to="{ path: Post.urlslug, name: 'PostView', params: {URLSlug: Post.urlslug} }">
   <!-- lots of images and text here with their own v-if statements -->
</router-link>
 

Возможно ли иметь условный оператор только для :to привязки, чтобы мне не приходилось выполнять огромное копирование и вставку всего router-link блока для реализации v-if , например, я бы предпочел избежать этого:

  <router-link v-if="Post.urlslug != null amp;amp; Post.urlslug.length" :to="{ path: Post.urlslug, name: 'PostView', params: {URLSlug: Post.urlslug} }">
       <!-- lots of images and text here with their own v-if statements -->
    </router-link>

 <router-link v-else :to="#"> <!-- <= this doesn't work anyway -->
       <!-- lots of images and text here with their own v-if statements -->
    </router-link>
 

Приведенный выше код не работает, потому # что это неприемлемое значение для :to поддержки. Каков наилучший практический способ сделать это?

:to="#" интерпретируется как « # является именем переменной».

Попробуйте это.

<router-link v-else to="#"></router-link>

Или использовать <a> напрямую.

<a v-else href="#"></a>

Вы можете легко сделать это с помощью динамического компонента:

 <component
  :is="Post.urlslug amp;amp; Post.urlslug.length > 0 ? 'router-link' : 'a'" 
  :to="Post.urlslug amp;amp; Post.urlslug.length > 0 ? { path: Post.urlslug, name: 'PostView', params: {URLSlug: Post.urlslug} } : undefined"
  :href="Post.urlslug amp;amp; Post.urlslug.length > 0 ? undefined : '#'"
>