Vuejs

My project uses Vue.js, and I'd like to minify my JS. I'm using Grunt's grunt-contrib-uglify package. My project's JS file looks like this:

// src/js/script.js var app = new Vue({ el: "...", data: {...}, computed: {...}, methods: {...}, beforeMount() {...} // line 902 });

Although the un-minified code works fine, Uglify throws an error when it hits line 902. I'm guessing it's because the way beforeMount() is declared isn't standard JavaScript. If I remove it, script.js is minified no problem. Unfortunately, it's crucial to the project, and I can't think of another workaround.

I've tried using grunt --force, but it doesn't output anything.

I'd be interested in thoughts on getting Grunt to minify this, or alternatives to Grunt that do the same job. Thanks :)

I'm having an issue where I'm outputting a list of components then reordering them. This works in my desktop chrome but not in mobile safari or chrome. Anyone ever run into this?

For more info, I have a vuex module that manages the entity array and I commit this mutation to reorder them:

state.entities.sort((a, b) => parseInt(a.initiative) < parseInt(b.initiative))

Then in a component, I am outputting markup according to this array of entities:

<entity v-if="showEntityList" v-for="entity in entities" :key="entity.id" :entity="entity"/>

I’m trying to bind a width to a div where the width is equal to a data attribute. The value of the data attribute is changing from 0 to 100, but the width of div isn’t changing. Can someone tell me why?

<div class="bar" :style="{ width: percentage + '%' }"></div> <script> export default { name: 'app', data() { return { percentage: 0, total: 43, downloaded: 0 } }, methods: { loadData() { var _this = this; this.toggleLoading(); var interval = setInterval(function(){ if (_this.downloaded == _this.total) clearInterval(interval); _this.downloaded++; _this.percentage = Math.floor(_this.downloaded / _this.total * 100) + ' %'; }, 100); }, }

What i want is, there a list made from json data. When i click on a item, it creates a new list dynamically. Now when i click a different item in the first list, i want the second list to change depending on data i receive.

html structure is :

div class="subject-list container-list" id="app-1"> <item-subject v-for="item in subjectlist" v-bind:item="item" v-bind:key="item.id" > </item-subject> </div> //some other code <div class="exam-list container-list" id="app-2"> <item-exam v-for="item in examlist" v-bind:item="item" v-bind:key="item.id" > </item-exam> </div>

The main.js file is :

//Dummy json data var subjects_json = { 'subjectlist': [ { id: 0, text: 'Computer Graphics' }, { id: 1, text: 'Automata Theory' }, { id: 2, text: 'Programming in C' } ]}; var exams_json = { 'examlist': [ { id: 0, text: 'IAT 1' }, { id: 1, text: 'IAT 2' }, { id: 2, text: 'Sem 2' } ]}; /*Contains definition of component item-subject... Its method() contains call to exam component because it will be called depending on the subject selected dynamically*/ Vue.component('item-subject', { props: ['item'], template: '<li v-on:click="showExams" class="subject-list-item">{{ item.text }}</li>', methods: { showExams: function(){ // alert(this.item.text) console.log("Subject Clicked: "+this.item.text) var app2 = new Vue({ el: '#app-2', data: exams_json, methods: { showStudents: function(){ console.log("exams rendered") } } }) }, } }); //Contains definition of component item-exam. Vue.component('item-exam', { props: ['item'], template: '<li v-on:click="showStudents" class="exam-list-item">{{ item.text }}</li>', methods: { showStudents: function(){ alert(this.item.text) console.log("exam component executed") // console.log("Exam Clicked: "+this.item) } } }); //Call to subject component var app1 = new Vue({ el: '#app-1', data: subjects_json, methods: { showExams: function(){ console.log("subjects rendered") } } })

So what this code does is, when i click on the first list i.e. subjects list, it dynamically renders new exams list. Now when i click on second list, alert() method is called successfully. However if i click any of the subject list(first list), now the alert() is not triggered while clicking second list. Please tell me whats wrong.

i have 2 lists, list 1 and list 2, each one can be sortable, and i can just drag elements form list 1 to list 2, i am coding based on this lib:

i am trying to cancel the draggable event when i drag a element from list 1 to a invalid zone, i can detect when i am inside the valid zone or not, but i can't cancel the event.

I tried with return false on the move function, but instead it cancels also my sortable events on my list1, any help on how to accomplish this?

i have a lot of code it is useless to share it since it is to much at the moment and is all conected, but in the pens on the github page it doesn't cancel to, any help with this?

Could you please tell me how to share data between components in VUE js (while creating list).I have two components list components and add todo component.I want to add items in list when user click on add button.But issue is input field present in different component and list is present in different component here is my code https://plnkr.co/edit/bjsVWU6lrWdp2a2CjamQ?p=preview

// Code goes here

var MyComponent = Vue.extend({ template: '#todo-template', props: ['items'] }); var AddTODO = Vue.extend({ template: '#add-todo', props: ['m'], data: function () { return { message: '' } }, methods: { addTodo: function () { console.log(this.message) console.log(this.m); //this.m =this.message; }, }, }); Vue.component('my-component', MyComponent); Vue.component('add-todo', AddTODO) var app = new Vue({ el: '#App', data: { message: '', items: [] }, });

Could someone please tell me what is wrong with this simple code? Just starting to explore flexbox. It works well on a normal html but once I vuejs-ed it, the footer stays on the top of the screen as if there isn't flex css.

Thank you.

<template> <div id="app"> <div class="wrapper"> <p>THIS IS MY CONTENT</p> </div> <footer> This is the footer </footer> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style lang="scss"> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; /* added as per LGSon's suggestion */ height: 100%; flex-grow: 1; display: flex; flex-direction: column; } html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; } .wrapper { flex: 1 0 auto; } footer { background: #ccc; padding: 20px; } </style>

Could you please tell me how to add an item to list on button click. Here is my code

https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview

var AddTODO = Vue.extend({ template: '#add-todo', props: ['m'], data: function () { return { message: '' } }, methods: { addTodo: function () { console.log(this.message) console.log(this.m); //this.m =this.message; }, }, }); <template id="add-todo"> <div> <input type="text" v-model="m"> <button @click="addTodo">Add todo</button> </div> </template>

is there any way to add items

I have a normalized tree data structure, like following:

{ ‘1’: { uid: ‘1’, value: null, children: [‘2’] }, 2’: { uid: ‘2’, value: ‘Child text’, children: [] } }

Then I have a custom component that renders the first element and renders children recursively. The state tree is initialized with only the first element in the beginning, then during render, it generates new elements by using children array.

When generating the second element and adding it to the tree with Vue.set(state, uid, elem), Vuex is re-rendering the first element as well. If I don’t use Vuex, then it works as expected.

Please see what I’m doing wrong in the fiddle, it’s a small script, just change the use_vuex boolean variable to see with and without Vuex and see the console log in render function.

Thank you.

I'm using webpack to build my project (generated by vue-cli). I use bootstrap(only the css part, the js part is unnecessary for me) as the UI framework.

I'm using only a small percentage of classes defined by bootstrap, for example only alert and alert-warning (a bit exaggerated, in reality, I used about 3% bootstrap classes).

I want to know whether there is a loader or plugin to remove unnecessary classes when generating app.css?

Any vujs library for video calling?

I'm trying to send a base64 encoded string to my server but the data binding I use is "" in the function to send it.

This is the code:

processFile: function(event) { var rawFile = event.target.files[0]; var reader = new FileReader(); reader.readAsDataURL(rawFile); reader.onload = function() { this.file = reader.result.split(',')[1]; }; },

So this.file contains the base64 string but when I access it in another function it's returning ""

What am I doing wrong here?

im reading source code of Vue.js

i cant understand this part in defineReactive function which turns a property into setter and getter.

my question is :

why would vue add 2 dependency when the property is an object?(see code below ,#1 and #2 are 2 different dependency)

const dep = new Dep() let childOb = !shallow && observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend()// #1 if (childOb) { childOb.dep.depend() //#2 } if (Array.isArray(value)) { dependArray(value) } } return value } }

could you please tell me how to use watch function in vue js .I tried to used but I got this error.

vue.js:485 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "m" found in ---> <AddTodo> <Root>

https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview

I created different components and watch properties in the main component

var AddTODO = Vue.extend({ template: '#add-todo', props: ['m'], data: function () { return { message: '' } }, methods: { addTodo: function () { console.log(this.message) console.log(this.m); this.m =this.message; }, }, });

When I try to add item I am getting this error. Step to reproduce this bug

1. Type anything on input field and click on Add button

I have just included VueJS in my HTML form. it's great.

Now, I made conditional enable / disable inputs, and it also works great.

But now, each time I submit the form, the form doesn't remember anymore the old value.

Here is my input ( it also has laravel variables ):

<select class="form-control" id="treeType" name="treeType" v-model="tree" v-on:change="treeType()" > <option value="0" @if ($setting->treeType == 0) selected @endif>{{ trans('laravel-tournaments::core.playoff') }} </option> <option value="1" @if ($setting->treeType == 1) selected @endif>{{ trans('laravel-tournaments::core.single_elimination') }} </option> </select>

And here is my VueJS code:

new Vue({ el: '#app', data: { isPrelimDisabled: false, isGroupSizeDisabled: false, isAreasDisabled: false, hasPrelim:0, tree:1, }, methods: { prelim: function(){ if (this.hasPrelim == 0){ this.isGroupSizeDisabled = true; }else{ this.isGroupSizeDisabled = false; } }, treeType: function(){ if (this.tree == 0){ this.isPrelimDisabled = true; this.isAreaDisabled = true; }else{ this.isPrelimDisabled = false; this.isAreaDisabled = false; } } }, created() { this.prelim(); this.treeType(); } })

What am I forgetting?

I'm trying to compute a message in a Vue instance so that it shows up in a h1 element - reversed, but it's not showing up. Any idea why?

new Vue({ el: '#comp-prop2', data: { message: 'Hello World...again!' }, computed: { reversedMessage() { return this.message.split('').reverse.join(''); } } }) <script src="https://unpkg.com/vue"></script> <div id="comp-prop2"> <h1> {{ reversedMessage }} </h1> </div>

I make a custom component in Vue.js .In My component, I have a list which has a delete button.On click of a button, it deletes the row.If I click any row it deletes the last row because the index is always -1 why? here is my code https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview

methods: { deleteTodo:function (item) { console.log(item) var index = this.items.indexOf(item); this.items.splice(index, 1); } }

below Whole code

var MyComponent = Vue.extend({ template:'#todo-template', props:['items'], computed: { upperCase: function () { return this.items.map(function (item) { return {name: item.name.toUpperCase(),complete:item.complete}; }) } }, methods: { deleteTodo:function (item) { console.log(item) var index = this.items.indexOf(item); this.items.splice(index, 1); } } }) Vue.component('my-component', MyComponent) var app = new Vue({ el: '#App', data: { message: '', items: [{ name: "test1", complete:true }, { name: "test2", complete:true }, { name: "test3", complete:true }] }, methods: { addTodo: function () { this.items.push({ name:this.message, complete:true }); this.message =''; }, }, computed: { totalCount:function () { return this.items.length; } } });

I have this strange case when trying to retrieve data from mongoDB using axios not showing on grid. It should be already successful given the data can already loaded into the view (already tested it), but it's nowhere inside beforeMount, mounted, or ready hook.

I already tried with

this.gridOptions.onGridReady = () => { this.gridOptions.api.setRowData(this.ticketData) }

but only yields partial success (unreliable), here's a code snippet to show what I mean,

<template> <div class="ticketing"> <ag-grid-vue style="width: 100%; height: 350px;" class="ag-fresh" :gridOptions="gridOptions" > </ag-grid-vue> {{testData}} <!--testData can be loaded--> <input type="button" @click.prevent="showData" value="test"> </div> </template> <script> //import stuff //header and url stuff export default { //component stuff data () { return { gridOptions: null, ticketData: [], testData: [] // only for testing purpose } }, methods: { showData () { console.log('data shown') this.testData = this.ticketData // this is working } }, beforeMount () { var vm = this axios.get(ticketingAPIURL, {'headers': {'Authorization': authHeader}}) .then(function (response) { vm.ticketData = response.data }) // this is working .catch(function (error) { console.log(error) }) this.gridOptions = {} this.gridOptions.rowData = this.ticketData // this is not working this.gridOptions.columnDefs = DummyData.columnDefs } // mount, ready also not working } </script>

To be more specific, I still can't determine what really triggers onGridReady of ag-grid in conjunction with Vue component lifecycle, or in other words, how can I replace button to show testData above with reliable onGridReady/Vue component lifecycle event?

I'm learning how to use Vue and one of the methods in my practice code isn't working, any idea why?

When clicking 'Add name' an alert should pop up, but it doesn't.

new Vue({ el: '#array', data: { names: ['Jo', 'Joana', 'Joanna', 'Joan'] }, methods: { addName: function() { alert('Adding name'); } } }); <script src="https://unpkg.com/vue"></script> <div id="array"> <ul> <li v-for="name in names" v-text="name"> {{ names }} </li> </ul> </div> <input type="text"> <button v-on:click="addName">Add name</button>

I'm trying to create a custom component in Vue.

This is the simplest component I could come up with and the value prop is ALWAYS undefined.

<template> <div> - {{ value }} - </div> </template> <script> export default { props: ['value'], mounted() { console.log(this.value); } } </script>

Not doing anything special when I call it:

<el-text-group v-model="testVar"></el-text-group> {{ testVar }}

The variable testVar shows fine, but the custom component shows nothing?

I've followed a bunch of tutorials and the official docs:

https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

I'm using latest Vue 2.4.2. It seems to work fine with Vue 2.2.x.

I've actually had this issue months ago but thought I would wait to see if something got fixed. But testing again now and the issue is still there. No idea, seems very basic, not sure if there is some change on how to do this?

FILES:

app.js

var component = require('./components/App.vue'); component.router = Vue.router; new Vue(component).$mount('#app');

App.vue

<template> <div> Hello <hr/> <test-cpt v-model="testVar"></test-cpt> </div> </template> <script> export default { data() { return { testVar: 'test' }; }, components: { testCpt: require('./TestCpt.vue') } } </script>

TestCpt.vue

<template> <div> - {{ value }} - </div> </template> <script> export default { props: ['value'] } </script>