VueJS: рендеринг нового компонента после клика

Question

Я бы хотел отобразить новый компонент в vue.js, как будто это новая страница.

Я пытаюсь сделать это с помощью так называемого «динамического компонента»

parent : Post.vue
child : Detail.vue

, поэтому, если щелкнуть одну из публикаций, сообщение выключено, а сведения включены.

Дело в том, что я должен отправить идентификатор кликаемого сообщения в Подробно.

Вот часть моего кода.

Post.vue

<template>
  <div>
    <div v-if="loading">
      loading...
    </div>
    <div v-else class="container">
      <ul>
        <li v-for="(post, index) in filteredPosts" v-bind:key="post.no">
            <section class="post__main">
              <div @click..?? class="main__title">{{post.title}}</div>
            </section>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
    created() {
      axios.get(this.url, {
        params: {
          page: this.page,
          ord: this.ord,
          category: []
        }
      }).then(res => {
        this.posts = res.data.list;
        this.loading = false;
        this.page++;
      });

Detail.vue

<template>
    <div>
        {{contents}}
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'Datail',
    data() {
        return {
            req_no: null,
            contents: {}
        }
    },
    created() {
      axios.get(url, {
        params: {
          req_no: this.req_no
        }
      }).then(res => {
          this.contents = this.res.data
      });
    }
}
</script>

Я чувствую, что могу сделать это сprops и v-if.Кто-нибудь может мне помочь?Спасибо! * * 1030

Answer 1

После нажатия на сообщение передайте идентификатор сообщения обработчику кликов. В обработчике кликов укажите путь к detail.vue, передавая идентификатор записи в качестве параметра маршрута.

как показано ниже:

  <li v-for="(post, index) in filteredPosts" v-bind:key="post.no">
      <section class="post__main">
          <div @click="onPostClick(post.id)" class="main__title">{{post.title}}</div>
      </section>
  </li>

А в вашем обработчике кликов:

 onPostClick(id: number) {
        this.$router.push({
            name: 'details',
            params: {
                id
            }
        });
    }

Это будет работать, если вы правильно настроили vue router в своем приложении и у вас есть действительный маршрут для подробностей.

Вы можете получить доступ к идентификатору записи в деталях следующим образом:

created() {
    this.postId = this.$route.params.id;
}

Answer 2

Я бы взглянул на <component>, который принимает реквизит :to и отображает компонент, это хорошо для чего-то вроде вкладок, где вы рендерите другой компонент из одного и того же общего места на странице без перезагрузки вся страница Посмотреть здесь: https://vuejs.org/v2/guide/components-dynamic-async.html Это, кажется, очень хороший вариант использования для вас, просто введите component реквизит, который вам нужен.