I am trying to do a simple example of connecting two div using jsplumb. So I integrated jsplumb with Vuejs and tried one example. I did npm install jsplumb. Then used like this:
<div>
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="margin-left:50px;"></div>
</div>
</div>
</template>
<script>
import jsplumb from 'jsplumb'
jsPlumb.ready(function() {
jsPlumb.connect({
source:"item_left",
target:"item_right",
endpoint:"Rectangle"
})
})
</script>
<style>
#diagramContainer {
padding: 20px;
width:80%; height: 200px;
border: 1px solid gray;
}
.item {
height:80px; width: 80px;
border: 1px solid blue;
float: left;
}
</style>
but now I’m getting an error like this:
20:2-16 "export 'default' (imported as '__vue_script__') was not found in '!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0&bustCache!./jsplumb.vue'
I don’t know how to proceed further. Please help me.
I would try to change your import to:
import jsplumb from 'jsPlumb'
and then use it as follow:
jsplumb.jsPlumb.ready(...)
Related
I am trying to pass props to a router-link which is used to take me to the update or delete page. In order for me to update the right element, I need to pass the item's id as a prop to the component(dropdown menu) to dynamically render the update and delete pages.
Here is my dropdown component:
<template>
<div class="dropdown">
<button #click="toggleMenu">
<fa class="dropdown_icon" icon="fa-solid fa-arrow-down" />
</button>
<div v-if="showMenu" class="menu">
<div class="menu-item" #click="itemClicked">
<router-link :to="`/updateList/${id}`" class="list__link"
>Update</router-link
>
<br />
<router-link :to="`/deleteList/${id}`" class="list__link"
>Delete</router-link
>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DropdownList',
props: ['id'],
data() {
return {
showMenu: false,
};
},
methods: {
toggleMenu() {
this.showMenu = !this.showMenu;
},
itemClicked() {
this.toggleMenu();
},
},
};
</script>
<style scoped>
.dropdown_icon {
padding: 0.2rem;
color: #ffd700;
background: black;
margin-top: 15px;
transition: var(--transition);
border-radius: 0.2rem;
height: 17px;
}
.dropdown_icon:hover {
background: white;
color: black;
height: 17px;
}
.menu {
background: white;
padding-left: 2rem;
padding-right: 2rem;
border-radius: 1rem;
}
.list_plus {
padding: 0.5rem;
border: 1px solid gray;
border-radius: 1rem;
transition: var(--transition);
}
.list_plus:hover {
background: black;
color: #ffd700;
}
.createList {
text-decoration: none;
}
.list__link {
text-decoration: none;
color: black;
}
</style>
Here is my code for the part in which I am sending the element's id as a prop to the component:
div class="all__lists" v-for="(item, index) in items" :key="index">
<div class="list">
<div class="title">
<div class="title__options">
<h1 class="list_name">{{ item[0].list_name }}</h1>
<Dropdown :v-bind:id="`${item[0].list_id}`" />
<!-- V-menu -->
<!--menu ends-->
</div>
</div>
</div>
</div>
The Items object looks like:
But when I Try to access the update or delete page, the router redirects me to /updateList/undefined instead of /updateList/1 or something. Can anybody help me in fixing this?
Your problem is that you mixed the v-bind directive with its shorthand :.
You wrote :v-bind:id instead of v-bind:id (or :id).
With your code, you should be able to get the id by defining the props v-bind:id in the child. It will work since :v-bind:id will be converted as v-bind:v-bind:id.
I have a bit problem to link vue.js and scss.
I have this AppHeader.vue archive:
<template>
<header id="header" class="header">
<div class="header-container container">
<nav>
<a class="btn-icon logo-btn" href="/">
<img
class="logo logo-normal"
src="../assets/logo.svg"
alt="Logo petinder"
/>
<img
class="logo logo-white"
src="../assets/logo_white.svg"
alt="Logo petinder"
/>
</a>
<ul class="menu-links">
<li>Servicios</li>
</ul>
</nav>
</div>
</header>
</template>
<script>
export default {
name: "Header",
};
</script>
<style lang="scss">
.header {
background: $accent;
text-align: center;
padding: 10px;
}
.aright {
text-align: right;
}
I have another folder where I have four scss archives. One of them, _base.scss, has the css body like this:
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $text-color;
font-family: $font-family-sans-serif;
font-size: 16px;
max-width:100%;
overflow-x: hidden;
}
ul, li{
list-style: none;
padding:0;
margin: 0;
}
.app-container{
min-height: calc(100vh - 61px);
display: flex;
flex-direction: column;
//padding-top: 70px;
}
main{
height: 100%;
flex:1;
}
The problem is that css body is not working on the AppHeader.vue. When I see it on the webrowser, the body has no width.
How can I link them?
Thanks.
Another way to do this is by using this inside the style,
result: <style src='../style.css' scoped>
It's more useful because you can use scoped with this method.
best way for the link your css file to the vue component is the import your css to the App Header.vue component, like this
<style lang="scss">
#import "./path/_base.scss"; // please enter your current path
</style>
course sure that used of webpack in your project that help you for modular
I'm starting as a frontend developer with VueJs and I'm having a problem that I can't understand... So I hope if some could help me... I'm currently using avidofood
/
vue-responsive-video-background-player
Because I need some kind of video playlist in the background. I implemented such as official documentation said (at least I think so..) but nothing happened, I mean, I have no errors, but the video does not start. This is my code:
In App.vue
<template>
<div id="App">
<video-background
src="https://www.youtube.com/watch?v=PpAxlizirDI"
style="max-height: 80%; height: 100vh"
>
<h1 style="color: white">Test App!</h1>
</video-background>
<div class="container mt-5">
<div class="row">
<div class="col-xl-12 col-lg-10">
<div class="form-group barcode">
<div class="row">
<div class="col">
<input
id="barcode"
type="text"
name="barcode"
class="form-control pl-3 shadow-none bg-transparent border-0"
placeholder="Acerca el producto al lector..."
autofocus
onfocus="this.value=''"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
//Oculto el mouse
//document.body.style.cursor = "none";
export default {
name: "App",
};
</script>
<style>
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
body {
background: #eee;
}
.text-color {
color: rgb(212, 14, 14) !important;
}
.barcode {
border: 1px solid;
border-color: #cccccc;
border-radius: 45px;
}
.container {
position: absolute;
bottom: 0px;
left: 10%;
margin: 0 auto;
}
</style>
In main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import VideoBackground from "vue-responsive-video-background-player";
Vue.component("video-background", VideoBackground);
Vue.use(BootstrapVue);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#App')
In Vue dev Tool:
In Chrome Console:
This is de Project Structure:
I hope someone could help me because I have no little idea what's going on.
Thanks in advance!
As source, you have a YouTube page, this is not a video.
<video-background
src="https://www.youtube.com/watch?v=PpAxlizirDI"
style="max-height: 80%; height: 100vh"
>
This is your path to your video. You can just use this value for
showing your video in every resolution.
The source of the video has to be in a format the browser can play (mp4 is a good format to use).
For example:
<video-background
src="/files/my-video.mp4"
style="max-height: 80%; height: 100vh">
Update based on your comment:
Because vue gets compiled it does not know what assets/demo.mp4 is,. You should import it first via an loader.
<script>
import video from 'assets/demo.mp4' // Or '#/assets/demo.mp4' depending on what loader you use.
export default {
name: "App",
};
</script>
And now you could use:
<video-background
:src=video
style="max-height: 80%; height: 100vh">
I have a fiddle that changes the contrast and brightness of an image.
When I try and add it as a .vue component onto my site the slider no longer effects the image. I know the issue is around my filter function. I just can't understand why my :style attribute isn't applying the change to me element.
What am I doing wrong/not getting?
fiddle that works - https://jsfiddle.net/BBMAN/fxtrtqpj/14/
code for my .vue component that does not work.
<template>
<div class="brightness-slider container">
<h1>{{ msg }}</h1>
<h2>Built using Vue.js</h2>
<div class="row">
<div class="col-md-10">
<img ref="img" class="img img-responsive" :style="filters" />
</div>
<div class="col-md-2">
<strong>Contrast ({{contrast}})</strong>
<input class="slider vertical" type="range" orient="vertical" v-model="contrast" max="1" min="0" step="0.01" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>
<strong>Brightness ({{brightness}})</strong>
</h4>
<input class="slider horizontal" type="range" v-model="brightness" max="3" min="0" step="0.01" />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ImageBrightnessSlider',
data() {
return {
//sending data to view.
msg: 'Audience Republic Brightness Modifier',
brightness: 1,
contrast: 1
}
},computed: {
filters() {
const toDash = (str) => str.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase()
debugger;
return { filter: Object.entries(this._data).filter(item => typeof(item[1]) !== 'object').map(item => `${toDash(item[0])}(${item[1]})`).join(' ') }
}
},
mounted() {
this.$refs.img.src = require('../assets/pleasure-garden-1200-by-768.jpg')
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
input[type=range][orient=vertical]{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 100%;
padding: 0 5px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 3px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
"fiddle that works" = incorrect
you are trying to shove HTML CSS JavaScript into Javascript!!!
interpreter Javascript does not understand HTML CSS!
you code must be something like this
index.html
<div id="App">
<!-- HTML code -->
</div>
<script>
// js code
</script>
<style scoped>
/* css code */
</style>
you have many mistakes, please see official documentation
also, you can see my vue examples
UPDATED:
SFC example
Reproducible via au new (Aurelia CLI), code below.
It worked perfectly before the update to 1.0.
The problem: When hitting the "Close" button, closePopup() is called but immediately afterwards openPopup() as well. The result is, that the popup does not close. Even click.trigger which shouldn't bubble up the event does not solve the problem.
How to solve this? Why has that behavior changed?
app.html
<template>
<div click.delegate="openPopup()" style="border: 1px solid black; width: 100px; height: 100px">
<div show.bind="_expanded">
Foo <button click.trigger="closePopup()">Close</button>
</div>
</div>
</template>
app.ts
export class App {
_expanded;
openPopup() {
this._expanded = true;
console.log("Opened");
}
closePopup() {
this._expanded = false;
console.log("Closed");
}
}
Solution (event.stopPropagation()):
app.html
<template>
<div click.delegate="openPopup()" style="border: 1px solid black; width: 100px; height: 100px">
<div show.bind="_expanded">
Foo <button click.trigger="closePopup($event)">Close</button>
</div>
</div>
</template>
app.ts
// ...
closePopup(event) {
event.stopPropagation();
this._expanded = false;
console.log("Closed");
}
// ...