我從 API 獲取資料并設法轉換了 HTML 文本，但我想使用 @button 在新選項卡中打開它？我怎樣才能做到這一點？
<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>
我需要一個探索更多按鈕來獲取一個新標簽并查看 item.details_en
uj5u.com熱心網友回復：
您可以在單擊Explore more按鈕時實作詳細資訊應該在新頁面中，并使用router概念探索詳細資訊。
第一步：安裝vue-routernpm 包
npm install --save vue-router
第 2 步：添加router參考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");
第3步：創建view組件Home.vue和Explore.vue下views夾
主頁.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>
探索.vue
<template>
<div>
<div v-html="details" />
</div>
</template>
<script>
export default {
name: "expore",
props: ["details"],
};
</script>
第4步：添加router-view在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>
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344820.html