`
<template>
<div class="drag">
<h2>Draggable</h2>
<draggable :list="list" class="dragArea">
<div class="noselect" v-for="element in list">{{element.name}}</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
data() {
return {
list: [
{ name: 'John' },
{ name: 'Joao' },
{ name: 'Jean' },
],
};
},
};
</script>
<style lang="scss">
</style>
i want to make a draggable list but my list is draggable only in mobile view of chrome but it does not work in normal view. i tried the jsfiddle example it works completely fine there but it is not working on my program. above is the vue file i wrote in order to make the list draggable`
Related
So this one is a bit tricky for me. I have a Sidebar.vue component with a link(Help). I want to trigger my Modal.vue component with different data for every main view eg. Home, About, Contact etc. So whenever I am on Home I want to trigger help modal with hints via that link for Home.vue, when I am on About I want to show hints for About.vue and so on..
My code:
Sidebar.vue
<template>
<ul>
<li>
<a #click="openHelp">Help</a>
</li>
</ul>
</template>
<script>
export default {
name: 'Sidebar',
methods: {
openHelp() {
this.$emit('help-modal');
},
},
};
</script>
Modal.Vue
<template>
<div class="modal" v-if="open">
<div class="modal-title">
<h4>Help</h4>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
open: {
type: Boolean,
default: false,
}
},
methods: {
close() {
this.$emit('closed');
},
},
};
</script>
Home.vue
<template>
<div>
Home
<modal
:open="helpOpen"
#closed="openHelpModal">
<p>Home Help</p>
</modal>
</div>
<template>
<sidebar/>
</template>
</template>
<script>
import Sidebar from '#/components/Sidebar.vue';
export default {
name: 'Home',
components: {
Sidebar,
},
data() {
return {
helpOpen: false,
}
}
methods: {
openHelpModal() {
this.helpOpen = !this.helpOpen;
},
}
}
</script>
I know that vuex would be the best solution but don't have an idea how to approach it. Modal would show only static images with a bit of text for every main view.
One way of doing this would be to simply add a property to the modal component e.g helpData and pass the relevant data to this prop in each of the main pages as shown below
Modal.vue
<template>
<div class="modal" v-if="open">
<div class="modal-title">
<h4>Help</h4>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
open: {
type: Boolean,
default: false,
},
helpData: {
type: String,
required: true
}
},
methods: {
close() {
this.$emit('closed');
},
},
};
</script>
Home.vue
<template>
<div>
Home
<modal
:open="helpOpen"
#closed="openHelpModal"
:help-data="This is a sample help data for the home view"
/>
</div>
<template>
<sidebar #help-modal="helpOpen = true"/>
</template>
</template>
<script>
import Sidebar from '#/components/Sidebar.vue';
export default {
name: 'Home',
components: {
Sidebar,
},
data() {
return {
helpOpen: false,
}
}
methods: {
openHelpModal() {
this.helpOpen = !this.helpOpen;
},
}
}
</script>
As indicated by #ljubadr, I have included the logic that would open the modal in the sidebar component of Home.vue. Also, I would recommend you change the name of the function openHelpModal to closeHelpModal (seeing as this function will basically close the modal) or toggleHelpModal (since from the logic of the function, it toggles the modal state).
In my Nuxt.js project I installed vue2-editor package to be able to write articles with HTML. When I come to page, write something and press the button everything works correctly, but when I reload page, I get document is not defined error.
Here is the code:
<template>
<div>
<SideBar />
<div class='content'>
<h1>Write article</h1>
<client-only>
<VueEditor
v-model='articleContent'
/>
</client-only>
<div style='margin-top: 15px'><button #click='postArticle'>Post article</button></div>
</div>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor';
import SideBar from '../components/SideBar';
export default {
name: 'Articles',
components: {
SideBar,
VueEditor
},
data() {
return {
articleContent: null,
}
},
methods: {
postArticle() {
console.log(this.articleContent)
},
},
}
</script>
And the error looks like that:
Also in documentation I've found that for Nuxt.js projects vue2-editor should be added to modules, and I did it, but it still doesn't work:
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'vue2-editor/nuxt'
],
You can try to load it dynamically:
<template>
<div>
<SideBar />
<div class='content'>
<h1>Write article</h1>
<client-only>
<VueEditor
v-model='articleContent'
/>
</client-only>
<div style='margin-top: 15px'><button #click='postArticle'>Post article</button></div>
</div>
</div>
</template>
<script>
import SideBar from '../components/SideBar';
export default {
name: 'Articles',
components: {
SideBar,
VueEditor: () => process.client ? (await import("vue2-editor")).VueEditor : ""
},
data() {
return {
articleContent: null,
}
},
methods: {
postArticle() {
console.log(this.articleContent)
},
},
}
</script>
Do follow the below steps the add that plugin into your Nuxt
There will be plugins folder just like pages and components, if not create one and add a js file into it vue2-editor.js.
Copy the below content inside vue2-editor.js
import Vue from "vue";
import Vue2Editor from "vue2-editor";
Vue.use(Vue2Editor);
Inside nuxt.config.js remove the 'vue2-editor/nuxt' from the modules and create a separate array called plugins as below
/*
** Plugins to load before mounting the App
*/
plugins: [{ src: "~/plugins/vue2-editor", mode: 'client' }],
Thats it you are done. Now you can start using it in any of the vue files like
<vue-editor placeholder="Write Something..." v-model="content"></vue-editor>
i am trying to use flipbook in my vue js project. i saw their documentation. has anybody used it before.? if you do then please show me an example. here is my code below of what i had tired so far.
this is my test.vue file
<template>
<flipbook :pages="pages" v-slot="flipbook">
<button #click="flipbook.flipLeft">Previous Page</button>
<button #click="flipbook.flipRight">Next Page</button>
</flipbook>
</template>
the scirp file
import Flipbook from 'flipbook-vue'
import flipbook from "#/components/flipbook";
export default {
name: "RwvSettings",
pages: [
null,
'images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg'
],
components: { flipbook },
};
and this is the component
<template>
<div slot v-bind="{
page
}" />
</div>
</template>
<script>
export default {
name: "flipbook",
props: {
pages: {
type: Array,
required: true
}
}
}
it shows nothing. please someone help me resolve this issue
i had found the problem why any image didn't appear .
firstly, it doesn't appear if the height and width of flipbook class is not defiend.
add a class
<flipbook class="flipbook" :pages="pages" v-slot="flipbook">
<button #click="flipbook.flipLeft">Previous Page</button>
<button #click="flipbook.flipRight">Next Page</button>
</flipbook>
then in style
.flipbook {
width: 90vw;
height: 90vh;
}
also slidely change the script codes as below
export default {
name: 'App',
data(){
return {
pages: [
null,
'images/2.jpg',
'images/3.jpg'
],
}
},
components: {
flipbook
}
}
now the images will appear in a flipbook
i'm trying to do mini shop app in VueJS without backend, only adding items to shopping cart.
I have component One(Nmdgrey.vue), where i have e.g. boots and "Add to cart" button.
<button #click="addToCart">Add to cart</button>
And function in first component:
methods: {
addToCart() {
const boots = { name: 'adidas nmd' };
this.cart.push(boots);
}
}
And i have component Two, where i have shopping cart
<div v-for="item in cart">
{{item.name}}
</div>
And JS
import Nmdgrey from '#/components/Nmdgrey.vue';
export default {
name: 'Shoppingcart',
components:
Nmdgrey,
data() {
return {
cart: [
{ name: 'adidas adizero' },
]
}
},
};
How i can add boots from component One to list in component Two?
I have this.cart.push(boots); in component One but it didn't work
This is what i want but button didn't work: codesandbox
Use $emit, when child components need to communicate with parent.
Refer official doc:Listening-to-Child-Components-Events
Nmdgrey.vue
<template>
<div>
<!-- component 1 -->
<button #click="add">Add to cart</button>
</div>
</template>
<script>
export default {
name: "Numdgrey",
methods: {
add() {
const boots = { name: "adidas nmd" };
this.$emit("add", boots);
}
}
};
</script>
Shoppingcart.vue
<template>
<div>
<!-- component 2 -->
<nmdgrey #add="addCart"></nmdgrey>
<br>
<div v-for="(item, index) in cart" :key="index">{{item.name}}</div>
</div>
</template>
<script>
import Nmdgrey from "./Nmdgrey.vue";
export default {
name: "ShoppingCart",
components: {
Nmdgrey
},
data() {
return {
cart: [{ name: "adidas adizero" }]
};
},
methods: {
addCart(good) {
this.cart.push(good);
}
}
};
</script>
Codesandbox demo : https://codesandbox.io/s/z2qz6oy8yp
From your post I've deduced that what you want to do is to share data from two or more Vue components. For this purpose, you could use Vuex, which provides centralized state management.
This way you could use a vuex mutation to add items to the cart, which could be used from any component. You would also be able to retrieve the cart data from any of them by using vuex getters.
you need to create a post method where you take over everything you need from one page to another page. after that everything will get into the cart and you will be able to create your page.
Codesandbox demo : https://codesandbox.io/s/94l44j8j14
Use props to pass the values to cart component.
Nmdgrey.vue
<template>
<div>
<b>Component 1 : NmdGrey</b><br><br>
<button v-for="(product, index) in boots" :key="index"
#click="addToCart(product.name)" >Add {{product.name}} to Cart</button>
<br><br><hr><br>
<shoppingcart :cart="cart" />
</div>
</template>
<script>
import shoppingcart from './shoppingcart.vue';
export default {
name: 'Nmdgrey',
components:{shoppingcart},
data() {
return {
boots:[{name: 'adidas adizero'}, {name: 'puma walker'}, {name: 'nike shoe'}, {name: 'adidas plain'}],
cart:[],
}
},
methods: {
addToCart(boots) {
this.cart.push({ name: boots });
}
}
}
</script>
Shoppingcart.vue
<template>
<div>
<b>Component 2 : Shopping cart</b>
<br>
<br>
<div v-for="(product, index) in cart" :key="index">{{product.name}}</div>
</div>
</template>
<script>
export default {
name: "Shoppingcart",
props: ["cart"],
data() {
return {};
}
};
</script>
Well, If your application is small, then you can create Vue mixins for addToCart and call it whenever you'll require in your component.
Similar to the methods, you can share data across the components with the use of mixins.
Here is the mixins official docs
Here is the working JsFiddle
Hope this helps!
I have 2 components, one creates an Editor using vue2-ace-editor, the other component is a select Option component. I Need to Change the theme of the Editor if I select another value in my select Option, so far my Editor component Looks like this:
<template>
<editor v-model="content" #init="editorInit" lang="javascript" theme="monokai"></editor> <!-- the default theme is monokai currently -->
</template>
<script>
export default {
props: [],
data () {
return {
language: 'javascript',
content: 'test',
}
},
components: {
editor: require('vue2-ace-editor'),
},
methods: {
editorInit () {
require('brace/ext/language_tools');
require('brace/mode/html');
require('brace/mode/javascript');
require('brace/mode/less');
require('brace/theme/clouds_midnight');
require('brace/theme/chrome');
require('brace/theme/ambiance');
}
},
}
</script>
And my select Option Looks like this:
<template>
<div>
<v-select
:items="themes"
v-model="themeSelection"
label="Select"
single-line
></v-select>
</div>
</template>
<script>
export default {
data () {
return {
themeSelection: null,
themes: [
{ text: 'ambiance' },
{ text: 'chrome' },
{ text: 'clouds_midnight' },
]
}
}
}
</script>
So basically if I select a different Option, I Need to Change the theme of the Editor, how do I manage this?