小编Cod*_*rPJ的帖子
如何在VueJS中访问[__ob__:Observer]的元素？
我是VueJS的新手.有一个父组件,数据从中传递给子孙.
我的孩子组件看起来像这样,
B.vue
import C from './c.vue'
export default{
props:['info'],
components:{
'c': C
},
created: function(){
this.getInfo();
},
methods: {
getInfo: function(){
console.log("Printing inside get method", this.info);
}
}
}<template>
<div>
<c :info="info"></c>
</div>
</template>当我看到控制台时,我看到一个这样打印的阵列,
![[__ob __:Observer]数组](https://i.stack.imgur.com/LIkQX.png)
当我尝试访问数组的元素,如info [0]时,控制台显示未定义.我无法访问数组的元素.有人可以帮帮我吗？谢谢!
7
推荐指数
推荐指数
1
解决办法
解决办法
1470
查看次数
查看次数
VueJS - 将本地json文件中的数据读入vis.js时间轴
我的问题是从本地JSON文件中读取.我正在创建一个VueJS应用程序.我试图将数据从json文件加载到这样的Vue组件中,
<script>
var container = {};
var items = {};
var options = {};
var timeline = {};
export default {
mounted() {
// DOM element where the Timeline will be attached
container = document.getElementById('mynetwork');
// Configuration for the Timeline
options = {
width: '100%',
height: '200px',
showTooltips: true
};
// initialize your network!
timeline = new vis.Timeline(container, items, options);
timeline.on('select', function(properties){
console.log(properties);
var itemNo = properties.items[0];
switch(itemNo){
case 1:
window.open('./../../../generalcheckup1.html');
break;
case 2:
window.open('./../../../scan1.html');
break;
case 3:
window.open('./../../../surgery1.html');
break; …5
推荐指数
推荐指数
3
解决办法
解决办法
2万
查看次数
查看次数
VueJS-“ npm run build”不会在dist文件夹中生成index.html文件
我已经开发了一个VueJS项目。运行命令后
npm run build
生成一个包含build.js文件和图像的dist文件夹。
但是/ dist中没有index.html文件。
我的项目结构如下所示
我的webpack.config.js看起来像这样
npm run build
如您所见，index.html文件位于src目录之外。有什么方法可以让我生成index.html文件，而不必将其放入/ src目录？
构建完成后，我尝试在Heroku上运行该应用程序以确保已加载。我收到这样的错误。
build.js有什么问题？
这是原始的index.html
let path = require('path');
let webpack = require('webpack');
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
let axios = require('axios');
let url = axios.defaults.baseURL;
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'openseadragon.html',
template: './openseadragon.html'
})
],
module: {
rules: [{
test: /\.vue$/,
loader: …5
推荐指数
推荐指数
1
解决办法
解决办法
2888
查看次数
查看次数
如何在Vue.js中使用v-for动态创建新的div？
我想基于数组中存在的元素数动态创建div。div包含ProgressBar.js创建的html元素。
这是Vue.js代码
import ProgressBar from 'progressbar.js'
var bar;
export default {
data() {
return {
fitness: ['Run', 'Cycle'],
val: 0.65
}
},
mounted(){
this.showProgressBar(this.val);
},
created: function() {
},
methods:{
showProgressBar: function(val){
new ProgressBar.Circle('#container',{
trailColor: 'gainsboro',
trailWidth: 20,
color: 'teal',
strokeWidth: 20
}).animate(val);
}
}
}<div class="content" v-for="fitness in fitness">
<span>{{ fitness }}</span>
<div id="container"></div>
</div>由于一个ID仅与一个div相关联，因此我无法执行将创建另一个div的新ProgressBar.Circle对象。有没有一种方法可以在每次执行新的ProgressBar.circle时动态地在v-中动态创建一个具有不同ID的新div？有人可以在这里帮我吗？
4
推荐指数
推荐指数
2
解决办法
解决办法
4148
查看次数
查看次数
[Vue 警告]：创建的钩子出错：“TypeError：无法设置未定义的属性”
我正在创建一个 VueJS 应用程序。我有一个子组件 Child.vue，数据从父组件传递给它。
儿童.vue
export default{
props:['info'],
data: function(){
return{
timeValue:{
minutes: '',
hours: ''
}
}
},
created: function(){
console.log("Printing inside created of Child ",this.info);
this.convertMins(this.info[0][2]);
},
methods:{
convertMins: (minutes) => {
console.log("Printing inside convert mins", this);
if(minutes===0){
this.timeValue.minutes = 0;
this.timeValue.hours = 0;
}
if(minutes===60){
this.timeValue.hours = 1;
this.timeValue.minutes = 0;
}
if(minutes>60){
this.timeValue.hours = Math.floor(minutes/60);
this.timeValue.minutes = minutes % 60;
}
}
}
}我的父组件看起来像这样，
父.vue
import Child from './Child.vue';
export default {
data(){
return{
info:[ …4
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
如何使用Vuejs在html中显示mysql blob图像？
我有一个这样的Vue文件，
export default {
data(){
return{
info: {
name: '',
image: '',
},
errors: []
}
},
created: function(){
this.getInfo();
},
methods: {
getInfo: function(){
this.info.name = response.data.results[0].name;
this.info.image = response.data.results[0].image;
}
}
}我正在将数据从该文件传递到子Vue组件中。子组件如下：
<template>
<div class="ui items">
<div class="item">
<div class="ui small image">
{{info.image}}
</div>
</div>
</div>
</template>
<script>
export default{
props:['info']
}
</script>我的图像作为Blob存储在MySQL数据库中。当我运行应用程序时，图像在UI上显示为二进制数据。对象看起来像这样，
这里有人可以帮助我显示图像吗？非常感谢你！
2
推荐指数
推荐指数
1
解决办法
解决办法
5573
查看次数
查看次数
无法移动面包屑项目以向右浮动
我正在使用 Vue.js 和 Bootstrap 开发应用程序。我正在开发一个面包屑，我希望图标显示在右侧，文本“文件”浮动到左侧。
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="conatainer-fluid">
<ol class="breadcrumb" style="padding: 0rem 1rem 0rem; background-color: transparent">
<li class="breadcrumb-item active">Files</li>
<li class="pull-right"><i class="fa fa-sort-amount-asc"></i></li>
<li class="pull-right"><i class="fa fa-th-large"></i></li>
<li class="pull-right"><i class="fa fa-list-ul"></i></li>
</ol>
</div>
<hr id="breadcrumb_hr">尽管使用了向右拉，但面包屑图标并没有向右浮动。
面包屑看起来像这样
我在这里做错了什么？
1
推荐指数
推荐指数
1
解决办法
解决办法
264
查看次数
查看次数