I got the data from an API and managed to get the HTML text converted but I would like to open it in a new tab using a @button? How can I do that?

  <li v-for="(item, index) in paginated('items')" :key="index" class="flex-item">

  <div id="article"  v-html="item.details_en" target="blank">Explore More</div>

I need an explore more button to get a new tab and to see the item.details_en

CodePudding user response：

You can achieve when click Explore more button the details should be in new page with explore details using router concept .

Step 1: Install vue-router npm package

npm install --save vue-router

Step 2: Add router reference in main.js

import Vue from "vue";
import App from "./App.vue";
import router from "@/router";
import VuePaginate from "vue-paginate";
Vue.use(VuePaginate);
Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#app");

Step 3: Create view components Home.vue and Explore.vue under views folder

Home.vue

   <template>
    <div>
      <paginate ref="paginator" class="flex-container" name="items" :list="items">
        <li v-for="(item, index) in paginated('items')"
          :key="index"
          class="flex-item">
          <h4>{{ item.pub_date }}, {{ item.title }}</h4>
          <img :src="item.image && item.image.file" />
          <div class="downloads">
            <span v-for="downloadable in item.downloadable.filter(
                (d) => !!d.document_en)" :key="downloadable.id">
              <a :href="downloadable.document_en.file">Download</a>
            </span>
          </div>
          <button type="button" id="article" @click.prevent="exploremore(item)">
            Explore More
          </button>
        </li>
      </paginate>
      <paginate-links
        for="items"
        :limit="2"
        :show-step-links="true"
      ></paginate-links>
    </div>
  </template>

  <script>
  import axios from "axios";
  import router from "@/router";

  export default {
    data() {
      return {
        items: [],
        paginate: ["items"],
      };
    },
    created() {
      this.loadPressRelease();
    },
    methods: {
      loadPressRelease() {
        axios
          .get(
            `https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`
          )
          .then((response) => {
            console.log(response.data.results);
            this.items = response.data.results;
          });
      },
      exploremore(item) {
        console.log("item", item);
        router.push({
          name: "explore",
          params: { details: JSON.stringify(item.details_en) },
        });
      },
    },
  };
  </script>
  <style>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  ul.flex-container {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-direction: row wrap;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  li img {
    display: initial;
    height: 100px;
  }
  .flex-item {
    background: tomato;
    width: calc(100% / 3.5);
    padding: 5px;
    height: auto;
    margin-top: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
  }
  .downloads {
    margin-top: 10px;
  }
  ul.paginate-links.items li {
    display: inline-block;
    margin: 5px;
  }
  ul.paginate-links.items a {
    cursor: pointer;
  }
  ul.paginate-links.items li.active a {
    font-weight: bold;
  }
  ul.paginate-links.items li.next:before {
    content: " | ";
    margin-right: 13px;
    color: #ddd;
  }
  ul.paginate-links.items li.disabled a {
    color: #ccc;
    cursor: no-drop;
  }
  </style>

Explore.vue

<template>
  <div>
    <div v-html="details" />
  </div>
</template>
<script>
export default {
  name: "expore",
  props: ["details"],
};
</script>

Step 4: Add router-view in app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

DEMO