In my vue-bootstrap application I would like to use hidden input file control. When I use the standard input component it works (Load 1). If i try to do the same with the reactive component form vue-bootstrap library it does not work (Load 2). I would appreciate any hints what I might be doing wrong.
app = new Vue({
el: "#app",
data: {
files: '',
}
})
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<div>
<b-button #click="$refs.fileInput1.click()"> Load 1</b-button>
<input type="file" ref="fileInput1" style="display:none;"/>
</div>
<div>
<b-button #click="$refs.fileInput2.click()"> Load 2</b-button>
<b-form-file v-model="files" style="display:none;" ref="fileInput2" />
</div>
</div>
</body>
</html>
The $refs.fileInput2 here is referring to the Vue component, not really the input element, which is actually wrapped inside a div (you could see it if you inspect the rendered element). So one thing you could do (although it's ugly and not recommended, you should at least move this to the methods section):
app = new Vue({
el: "#app",
data: {
files: '',
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-button #click="$refs.fileInput1.click()"> Load 1</b-button>
<input type="file" ref="fileInput1" style="display:none;" />
</div>
<div>
<b-button #click="$refs.fileInput2.$el.querySelector('input[type=file]').click()"> Load 2</b-button>
<b-form-file v-model="files" style="display:none;" ref="fileInput2" />
</div>
</div>
Although I would say you should just use the native file input element since you are hiding the <b-form-file/> anyway.
It's working fine.You may check the below fiddle.
https://jsfiddle.net/tyagdvm5/
<b-form-file style="display:none;" v-model="file2" choose-label="Attachment2"></b-form-file>
Or for accurate solution please create a fiddle and upload the link.
Related
I'm trying to setup basic prototype web pages to test UX design in code. And want to recycle html files such as left navigation. Trying to use Vue to do this so that I can also learn Vue. I do not have access to the artifactory (company policy). So I cannot use things other than this http vue loader package that I found. So far, I was able to add external vue which is comp-nav. But from here, I want to pass title="Service" from index.html to comp-vue. How do I do that? Any help would be great! BTW, using Apache2 that came with mac to run.
index.html
<!DOCTYPE html>
<html lang="en">
<title>App</title>
<!-- Vue2 -->
<!-- from https://github.com/FranckFreiburger/http-vue-loader -->
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<comp-nav title="Service"></comp-nav>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
components: {
'comp-nav': httpVueLoader('components/comp-nav.vue')
}
});
</script>
</body>
</html>
components/comp-nav.vue
<template>
<div id="nav">
<div class="nav-header">
<div class="header-title"><a>{{ title }}</a></div>
<div class="header-close">U</div>
</div>
<div class="nav-body">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div><!-- #nav -->
</template>
Based on the example from the docs, you could define a component prop in comp-nav.vue:
<template>
<div class="header-title">{{ title }}</div>
</template>
<script>
module.exports = {
props: ['title']
}
</script>
Non WebDev here trying to build a basic UI with primevue on vue3. Tried to run the basic demo but with some components included. Don't know if components come with their own CSS dependencies.
Bellow is my html code. I have also tried using a vue project with separate components and gottenthe same result
Basic example fails:
<html>
<head>
<meta charset="utf-8">
<title>PrimeVue Demo</title>
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
</head>
<body>
<div id="app">
<p-inputtext v-model="val"></p-inputtext>
<h6>{{val}}</h6>
</div>
<div class="p-d-flex">
<div class="p-mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div>
<div>Item 3</div>
</div>
<div class="p-grid">
<div class="p-col-4">4</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
</div>
<div class="p-grid">
<div class="p-col-2">2</div>
<div class="p-col-6">6</div>
<div class="p-col-4">4</div>
</div>
<script>
const {createApp, ref} = Vue;
const App = {
setup() {
const val = ref(null);
return {
val
};
},
components: {
'p-inputtext': primevue.inputtext
}
};
createApp(App).mount("#app");
</script>
</body>
</html>
Should render 1 row for flex items and 2 rows for numbers in grid layout. instead it renders all rows with no styling. What am I missing?:
In order to use prime vue's flex and grid layout, you need to load PrimeFlex.
https://primefaces.org/primevue/showcase/#/primeflex
The documentation only has npm setup but you may be able to include the following link.
<link href="https://cdn.jsdelivr.net/npm/primeflex#2.0.0/primeflex.min.css" rel="stylesheet">
In case you do it through npm, After installing the package, don't forget to include the CSS file, in my case, I included it in my main.js just adding this line.
import 'primeflex/primeflex.css';
https://primefaces.org/primevue/showcase/#/primeflex
The CDN method works!! However I downloaded the file and placed this
<link rel="stylesheet" href="static/primevue/primeflex.min.css" />
inside the head section of my html file.
However it did not work as per the documentation. I had to remove the p- for it to work:
<div id="app" class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
I'm trying to use the Vue2Leaflet component (https://vuejsexamples.com/vue-2-components-for-leaflet-maps/) but I have hard time to make it works. I could not make this simple example work, with the html file :
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<div id="app" style="height: 400px">
<v-map :zoom=13 :center="[47.413220, -1.219482]">
<v-tilelayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></v-tilelayer>
<v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
</v-map>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue2-leaflet"></script>
</body>
</html>
and the js file :
Vue.component('v-map', window.Vue2Leaflet.LMap)
Vue.component('v-tilelayer', window.Vue2Leaflet.TileLayer)
Vue.component('v-marker', window.Vue2Leaflet.Marker)
new Vue({ el: '#app'});
I made a fiddle with this basic exemple : http://jsfiddle.net/rvxc2uLk/3.
What am I missing ?
You forgot the "L" before .TileLayer also for .Marker.
Vue.component('v-map', window.Vue2Leaflet.LMap)
Vue.component('v-tilelayer', window.Vue2Leaflet.LTileLayer)
Vue.component('v-marker', window.Vue2Leaflet.LMarker)
I want to use Element UI in IE 11,and when i user the tree component,it creates errors.
It will create the error
Failed to generate render function:
SyntaxError 'missing in'
I want to show a icon before the text.But in IE 11,it errors while Chrome ok.
Anyone can tell me the problem..thx
the whole demo is
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MLLRSJ</title>
<link rel="stylesheet" href="./Scripts/assets/Element/index.css">
<script src="./Scripts/assets/vue/vue.js"></script>
<script src="./Scripts/assets/Element/index.js"></script>
</head>
<body>
<div id='Element'>
<el-tree :data="tree" :props="treeProps">
<span slot-scope='{node,data}'>
<i class='el-icon-check'></i>
<span style="display:inline" v-html='node.label'></span>
</span>
</el-tree>
</div>
</body>
<script>
var vm = new Vue({
el:'#Element',
data:{
tree:[{
label:'1',
children:[{
label:'1-1'
}],
},
{
label:'2',
children:[
{
label:'2-1'
}
]
}
],
treeProps:{
label:'label',
children:'children'
}
}
})
</script>
</html>
Try to avoid curly braces(in slot-scope in your example) and arrow functions in inline templates if you work with IE11 (I had same problem in one of my projects):
<el-tree :data="tree" :props="treeProps">
<span slot-scope='someObject'>
<i class='el-icon-check'></i>
<span style="display:inline" v-html='someObject.node.label'></span>
</span>
</el-tree>
I have a very simple local setup for VueJS and am having problems running a simple example that shows how raw HTML can be output. I'm not including link to JS Fiddle because I want to make it work on local setup only, and sometimes my examples work on JS Fiddle but not on local machine.
Anyway, here's the html code:
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>
</head>
<body>
<div id="app">
<!-- Doesn't work! -->
<p>{{ link }}</p>
<!-- This works! -->
<p v-html>{{ link }} </p>
</div>
</body>
</html>
And here's my app.js file:
window.addEventListener('load', function(){
new Vue({
el: '#app',
data: {
link: 'Google'
}
});
});
Now when I load the window, I get twice the following error:
[Vue warn]: Property or method "link" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <Root>).
Any idea where I'm going wrong?
Can you try this one and see if it works as required. I moved the scripts after the body.
<html>
<head>
</head>
<body>
<div id="app">
<!-- Doesn't work! -->
<p>{{ link }}</p>
<!-- This works! -->
<p v-html>{{ link }} </p>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>
</html>