Arrays 如何在vue.js中显示从阵列到boostrap模式的当前数据
--问题:-- --问题:-- 嗨,我是一个noob程序员,正在尝试构建一个Vue web应用程序。我有一个问题,我有一个包含json数据的数组,我循环并传递给一个组件,但在该组件中,我有一个引导模式,我想显示当前数据 它可以工作,但当我单击模式时,它只显示数组(0)中的第一个obj,所以它不会继续?有人能帮我解决这个问题吗?我希望你们能理解我的问题,谢谢 ---页面代码(父级)---Arrays 如何在vue.js中显示从阵列到boostrap模式的当前数据,arrays,vue.js,modal-dialog,Arrays,Vue.js,Modal Dialog,--问题:-- --问题:-- 嗨,我是一个noob程序员,正在尝试构建一个Vue web应用程序。我有一个问题,我有一个包含json数据的数组,我循环并传递给一个组件,但在该组件中,我有一个引导模式,我想显示当前数据 它可以工作,但当我单击模式时,它只显示数组(0)中的第一个obj,所以它不会继续?有人能帮我解决这个问题吗?我希望你们能理解我的问题,谢谢 ---页面代码(父级)--- 此处文本 从“./components/TreeCard.vue”导入TreeCard; 导出默认值{ 名称
此处文本
从“./components/TreeCard.vue”导入TreeCard;
导出默认值{
名称:“树”,
组成部分:{
特雷卡
},
数据(){
返回{
Trearray:[],
错误:[]
};
},
安装的(){
试一试{
this.trearray=[
{
id:0,
名称:“obj名称1”,
图片:
“此处的图像url”,
描述:“测试1”
},
{
id:1,
名称:“obj名称2”,
图片:
“此处的图像url”,
描述:“测试2”
}
];
}
捕获(错误){
console.log(错误);
}
}
};
---组件代码(子级)---
{{tree.name}
{{tree.name}
&时代;
{{tree.description}
接近
导出默认值{
姓名:“卡”,
数据(){
返回{
bodyID:{}
};
},
道具:{
树:{}
},
方法:{
切换:函数(){
this.bodyID=this.tree.id;
}
}
};
您只需要确保元素id是唯一的,因为jQuery使用这些id来触发模式
:id=“'exampleModalScrollable'+tree.id”
:数据目标=“”#示例ModalScrollable“+tree.id”
您可能需要考虑不依赖jQuery的Bootstrap VUE,并与VUE进行更直接的工作。
<template>
<div class="content">
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-sm-1 col-md-1 col-xl-0"></div>
<div class="col-sm-12 col-md-10 col-xl-12">
<h1 id="TreePageTitle"> Text here </h1>
<div id="grid">
<TreeCard
data-toggle="modal"
data-target="#exampleModalScrollable"
v-for="tree in treeArray"
:key="tree.id"
:tree="tree"
/>
</div>
</div>
<div class="col-sm-1 col-md-1 col-xl-0"></div>
</div>
</div>
</div>
</template>
<script>
import TreeCard from "../components/TreeCard.vue";
export default {
name: "Trees",
components: {
TreeCard
},
data() {
return {
treeArray: [],
errors: []
};
},
mounted() {
try {
this.treeArray = [
{
id: 0,
name: "obj name 1",
image:
"image url here",
description: "test 1"
},
{
id: 1,
name: "obj name 2",
image:
"image url here",
description: "test 2"
}
];
}
catch (error) {
console.log(error);
}
}
};
</script>
<template>
<div>
<div class="card" v-on:click="toggle">
<img :src="tree.image" class="img-fluid" id="CardImg" />
<h2 class="card-title">{{tree.name}}</h2>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalScrollable"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalScrollableTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">{{tree.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{tree.description}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Card",
data() {
return {
bodyID: {}
};
},
props: {
tree: {}
},
methods: {
toggle: function() {
this.bodyID = this.tree.id;
}
}
};
</script>