Не вижу div в компонент vue

Question

У меня есть компонент vue с div и кнопкой, а в другой div у меня есть два компонента

<script>
    export default {
        name: 'excursion-backend-component',
        methods:{
            doRedirection: function () {
                window.location = APP_URL+"/excursiones/create";
            }
        },
        mounted() {
            console.log(APP_URL+"/excursiones/create");
            console.log("aaaa");
        }
    }
</script>

<template>
    <div class="container">
        <h3>Adicionar excursi&oacute;n</h3>
        <div style="text-align: right">
            <a class="btn btn-primary" :href="doRedirection"><i class="fa fa-plus"></i> Adicionar</a>
        </div>
        <br>

        <div>
            <excursion-list-component></excursion-list-component>
            <excursion-add-component></excursion-add-component>
        </div>
    </div>
</template>

Но я не вижу кнопки на навигаторе.

Что не так?

Здеськак я вижу страницу

Answer 1

: href = "" ожидается строка с URL-адресом для навигации, но вы используете метод.

Используйте вместо этого @click: href, если вы хотите использовать метод.

<a @click="doRedirect">... </a>

Или, возможно, переместить его в вычисляемый блок

computed: {
    excursionesUrl () {
      return APP_URL+"/excursiones/create";
   }
}