我正在尝试将 Vue 数据实现到 Bootstrap 轮播中
Posted
技术标签:
【中文标题】我正在尝试将 Vue 数据实现到 Bootstrap 轮播中【英文标题】：I am trying to implement Vue data into a Bootstrap carousel 【发布时间】：2021-05-23 16:41:29 【问题描述】：第一张幻灯片效果很好，但第二张幻灯片不会将 Vue 数据加载到幻灯片中。我不能使用 Vue 光滑的轮播或数组函数，因为轮播有很多对象。如果我尝试将它们分成数据中自己的部分，它也会中断。我在下面包含了我的代码。我没有想法，可以使用你的。
''' <!DOCTYPE html>
<html lang="en" id="books_pg">
<head>
<meta charset="UTF-8">
<title>Books</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="styles/main_boot.css">
</head>
<body>
<div id="container">
<span id="header"></span>
<main>
<div class=" container">
<div class="row"></div>
<div id="bookSeries" class="carousel slide" data-interval="0" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active timeBooks" >
<div v-html="t105.bkCover" class="row"></div>
<div class="row">
<div class="container d-flex">
<div class="wrapper row ml-15 justify-content-center">
<a class="trailer col-sm-12 col-md-2" :href="t105.link"><h2 class="text-bottom">trailer</h2></a>
<p class="sum col-md-7">t105.sum</p>
<a class="meme col-sm-12 col-md-2" href="meme.html"> <h2>memes</h2></a>
</div>
</div>
</div>
</div>
<div class="carousel-item timeBooks">
<div v-html="t205.bkCover" class="row"></div>
<div class="row">
<div class="container d-flex">
<div class="wrapper row ml-15 justify-content-center">
<a class="trailer col-sm-12 col-md-2" :href="t205.link"><h2 class="text-bottom">trailer</h2></a>
<p class="sum col-md-7">t205.sum</p>
<a class="meme col-sm-12 col-md-2" href="meme.html"> <h2>memes</h2></a>
</div>
</div>
</div>
</div>
</div>
<div>
<a class="controller carousel-control-prev" href="#bookSeries" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="controller carousel-control-next" href="#bookSeries" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</main>
<div class="row justify-items-center">
<a><h6 id="off">Off the Rails books</h6></a>
</div>
<div class="container">
<div class="includes row">
<span id="ft"></span>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="app.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="jquery.js"></script>
</body>
</html>'''
'''const Test = new Vue(
el: '.timeBooks',
data:
t105:
bkCover:
'<img class="cover d-block col-md-2 mx-auto mt-2 img-fluid" src="img/books/time105am.png" >',
sum: "At the beginning of a new ice era, past and present will collide, and love will survive the ice and snow that encases the planet.\n" +
" Karmen-Marie has spent the last decade working for her father’s shady business as an assassin. Once underground she must hunt and kill her mysterious target.\n" +
" Rea, a second-generation military trained instructor. Build, train, and move on, is the only way of life Rea understands.\n" +
" Rea’s former flame has come to kill him. An accidental mix-up causes the killer to loses her memory. Rae struggles to let this attractive hired gun back into his heart.",
link: 'https://www.youtube.com/watch?v=UTgiOKYp-9s&feature=youtu.be',
meme: '\meme.html',
,
t205:
bkCover:
'<img class="cover d-block col-md-2 mx-auto mt-2 img-fluid" src="img/books/time205am.jpg" >',
sum: "class=\"sum col-sm-12 col-md-8 mr-3\"> After spending all her life trying to be normal, Nova gives up. Content in her private world and with no desire to change, she finds herself pulled into a mission that takes her away from her safe and secluded life.\n" +
" Arrow has been trapped in a cage for, well, he can’t recall, but he is ready to be free. When his “Angel” appears, she’s what he’s been searching for all his life, and his soul knows her. But his angel doesn’t know who he is, nor does she care, and she resists helping him.\n" +
" Before long they will uncover the dark past that haunts Arrow, and the even darker future that awaits them both.",
link: 'https://www.youtube.com/watch?v=ug2VqdaFmZY',
meme: '\meme.html',
,
)''''''
【问题讨论】：
【参考方案1】：我已经使用 Bootstrap 构建了几个 Vue 2 应用程序，但没有使用 Carousel，所以这听起来像是一个有趣的练习。
我有一个用于测试功能的 Vue CLI 沙盒应用程序，因此我根据您上面的代码创建了一个单文件组件，开始编辑和构建，但最终决定从一个更简单的组件开始。我从文档中的 Bootstrap Carousel 示例创建了一个 SFC。我建议您简化代码，直到轮播也正常工作为止。
一旦我确定在我的 main.js 中导入了 Bootstrap 和 jQuery（同样，使用 Vue CLI），简化的轮播就可以工作了。这是我的 Carousel.vue 组件中的代码。我可能会做一些额外的工作来为轮播项目实现一个“v-for”循环，但我想发布这个。
<template>
<div class="row">
<div class="col-md-6">
<div class="carousel">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h4> slideData[0].title </h4>
<img class="d-block w-100" :src="slideData[0].imgSrc" :>
<p> slideData[0].text </p>
</div>
<div class="carousel-item">
<h4> slideData[1].title </h4>
<img class="d-block w-100" :src="slideData[1].imgSrc" :>
<p> slideData[1].text </p>
</div>
<div class="carousel-item">
<h4> slideData[2].title </h4>
<img class="d-block w-100" :src="slideData[2].imgSrc" :>
<p> slideData[2].text </p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default
data()
return
slideData: [
id: 1,
title: 'First slide',
text: `The carousel is a slideshow for cycling through a series of content,
built with CSS 3D transforms and a bit of javascript. It works with a series of images,
text, or custom markup. It also includes support for previous/next controls and indicators.`,
imgSrc: require('../../assets/images/my-portrait.jpg')
,
id: 2,
title: 'Second slide',
text: `In browsers where the Page Visibility API is supported, the carousel will avoid sliding
when the webpage is not visible to the user (such as when the browser tab is inactive, the browser
window is minimized, etc.).`,
imgSrc: require('../../assets/images/my-portrait.jpg')
,
id: 3,
title: 'Third slide',
text: `Please be aware that nested carousels are not supported, and carousels are generally not
compliant with accessibility standards.`,
imgSrc: require('../../assets/images/my-portrait.jpg')
]
</script>
【讨论】：
以上是关于我正在尝试将 Vue 数据实现到 Bootstrap 轮播中的主要内容，如果未能解决你的问题，请参考以下文章
在 Vue 3 中将数据对象设置为来自 Promise 的值