VueJs используют реквизиты, полученные из <router-link> - PullRequest
Новая
       17

VueJs используют реквизиты, полученные из <router-link>

0 голосов
/ 07 ноября 2018

У меня есть панель навигации и текстовое поле, в котором пользователь может искать сообщения по тегам. Если пользователь вводит 1-3 тега, записанные теги будут сохранены в массиве тегов.

Моя ссылка маршрутизатора в компоненте navbar выглядит следующим образом: (только соответствующая часть) 

<router-link :to="{name:'posts', props:{searchTags: tags}}">
         <button type="button" v-if="this.tags.length > 0"
               class="...">Search
         </button>
</router-link>

в моем route.js - это маршрут моих сообщений (важный фрагмент моих маршрутов. Js) 

 routes: [
        {
            path: "/posts",
            component: posts,
            name: 'posts'
        },
    ]

Навбар должен отправить массив тегов компоненту posts. К сожалению, я не могу этого сделать.

Компонент posts отправляет запрос на публикацию в API, который получает последние сообщения. Но я хочу, чтобы при передаче тегов выбирались не самые новые сообщения, а только сообщения с определенными тегами. Но сначала я должен как-то получить теги.

Я пытался получить их с помощью "this. $ Props.searchTags" и других вещей. К сожалению, результат всегда "неопределен". 

export default {
        name: "posts",
        props: {
           searchTags: Array,
           required: false
        },
        data: function () {
            return {
                apiUrl: '/getPosts',
                ....              
                tags: [this.searchTags],
            }
        },
        methods: {
            getPosts: function (url) {
                this.$http.get(url).then(function (data) {
                       // blabla                           
                });
            },
            getPostsByTags: function() {                
                      //
            }, 
        },
        created() {
            if(this.$props.searchTags == null)
                  this.getPosts(this.apiUrl);
            else 
                  this.getPostsByTags(bla);
        },
    }

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Попробуйте добавить props: true в определение вашего маршрута 

routes: [
    {
        path: "/posts",
        component: posts,
        name: 'posts',
        props: true
    },
]
0 голосов
/ 07 ноября 2018

Ссылка на маршрутизатор to свойство принимает строку или Местоположение в качестве значения. Объект местоположения не имеет props свойства.
Вместо этого можно использовать params для отправки данных в компонент маршрута: 

<router-link 
  :to="{ name: 'posts', params: { searchTags: tags } }"
>
...
</router-link>

Таким образом, searchTags со значением присвоенного tags будет доступен через this.$route.params.searchTags внутри целевого компонента.

Так что created крюк из приведенного выше примера должен быть обновлен до: 

created () {
  if (!this.$route.params.searchTags) {
    this.getPosts(this.apiUrl);
  } else {
    this.getPostsByTags(bla);
  }                  
},
...