vue-component

Trying to use jquery-chosen with vue, the problem is that this plugin hides the actual select that I applied v-model, so when I select a value vue doesn't recognize it as a select change event and model value is not updated. I've seen some solution available for Vue 1 that don't work with Vue 2 It's showing the current value but doesn't know how to set so that model value changes. http://jsfiddle.net/q21ygz3h/ Vue.directive('chosen', { twoWay: true, // note the two-way binding bind: function(el, binding, vnode) { Vue.nextTick(function() { $(el).chosen().on('change', function(e, params) { alert

in my app written with VueJs 2, I have into the Vue.app this code: export default { name: 'app', data () { return { title: 'Gestione fornitori', idfornitore: '' } }, methods: { loadFunction (route) { this.$router.push(route) } } } </script> I wish to access the property idfornitore from another component, I've used: mounted () { this.$parent.idfornitore = '' }, or also: mounted () { var Vue = require('vue') Vue.app.idfornitore = '' }, But it didn't worked. Which is the correct way to access the property from another component? Thank you in advance. Use props to communicate data from parent to

I'm using the following code to display categories from an array. The array may contain duplicate categories. Is there any way I can only select unique elements in VueJS? <li v-for="product in products"> {{product.category}} </li> Array: products: [ { id: '1', title: 'Test 1', category: 'Test 3' }, { id: '2', title: 'Test 2', category: 'Test 1' }, { id: '3', title: 'Test 3', category: 'Test 2' }, { id: '3', title: 'Test 4', category: 'Test 1' }, { id: '5', title: 'Test 5', category: 'Test 3' } ] You can create a computed property with the unique values you want. If you include Lodash in your

I am new to Vue JS and I am creating a thumbnail viewer wherein I'll be getting a list of images and videos as an array of objects. At first, I will be showing just 5 items and when the user clicks Top / Bottom button, I want to slide the thumbnails vertically. I have created a codepen by referring some links on StackOverflow. I am using Vue Transitions and my data seems to be reactive but somehow I can't see the smooth transition (sliding to the top / bottom by 100px) when I click on the Top and Bottom buttons. HTML Code: <div id="app" class="container-fluid"> <div class="row row-eq-height">

I am attempting to render a list of components. All the data properties are displaying correctly except the img src url. the files/folders are : CryptContent.vue - contains the v-for the component to render assets/ - contains the images The CryptContent.vue contain: <template> <OwnedCardContent v-for="card in allCards" :id="card.id" :name="card.name" :cost="card.cost" :cset="card.cset" :edition_total="card.edition_total" :level="card.card_level" :unlock_czxp="card.unlock_czxp" :buy_czxp="card.buy_czxp" :transfer_czxp="card.transfer_czxp" :sacrifice_czxp="card.sacrifice_czxp" :url="card.graphic

This question already has an answer here: Global data with VueJs 2 2 answers I am building a single page app with Vue.js. It's a relatively simple app, more like an extended, opinionated spreadsheet. I'm using vue-router to handle different views of the app, some are used to enter new data, some are used to perform calculations on the data but all that data is intertwined (data entered in view #1 is used to enter data in view #2 and then both are used to calculate something in view #3). That means I need a global data structure. From my research I found that I have several options to handle

I'm trying to set a data variable in a watch handler function for an input field in a VueJs Component. I have something like this: data() { return { params: { // default params to 1 month from: new Date().setMonth(new Date().getMonth() - 1), to: Date.now(), skip: 0, limit: 100 } } } watch: { dates: { handler: date => { console.log(this.params) if (date.start) { this.params.from = moment(date.start, "YYYY/MM/DD") } if (date.end) { this.params.to = moment(date.end, "YYYY/MM/DD") } }, deep: true } } When I set an input for the dates variable in the view template, I get an undefined for this

I'm trying to implement Veutify's text field This is what it looks like for me right now: And this is what it looks like when the text field is in focus: These are my imports in main.js import Vue from 'vue'; import Vuetify from 'vuetify'; Vue.use(Vuetify); Am I missing an import or something? I ran in the same issue, you need to wrap your application in a <v-app> . The reason is that the border's color depends on the theme you're using. If you try to inspect the documentation you will see that the border's rule is something like .application--light .input-group .input-group__details :