Feed aggregator

I am working with vuejs draggable/sortable, and i have 2 lists from which ican drag elements from list 1 to 2, the thing is, i can't place representative text above the list2, i mean the begin text that says something like "drag elements here", if i put that text it affects all the draggable and sortable logic inside the dragArea, how can i accomplish that without affecting the area?

<div class="row" v-if="getOptionValue == 1"> <draggable class="box" @change="elementPosition" v-model="myList" :options="{group: getSectionOptions,put:false }"> <transition-group id="list2" class="box-header with-border drop-zone" style="overflow-y: auto; height:80vh;display:block;padding:5px" name="list-complete"> <div v-for="(value, key, index) in myList" :key="key" @click.prevent="changeView(value.key,key)" v-if="value.key != 'Document'" class="panel panel-color list-complete-item"> <div class="quote box-body"> <p v-if="value.key"> <span class="spanWidth" v-if="value.key == 'line break' || value.key == 'page break'">Break</span> <span class="spanWidth" v-else>{{value.key}}</span> <span class="spanWidth text-muted" v-if="value.key == 'Table'"> (rows:{{value.rows}};cols:{{value.cols}})</span> <span class="spanWidth text-muted" v-if="value.key == 'Paragraph'">({{ value.text | truncate }})</span> <span class="spanWidth text-muted" v-if="value.key == 'Image'"> (width:{{value.width}};height:{{value.height}})</span> <span class="spanWidth text-muted" v-if="value.key == 'heading'"> ({{value.headingType}})</span> <span class="spanWidth text-muted" v-if="value.key == 'line break' || value.key == 'page break'">({{value.key}})</span> <span class="spanWidth text-muted" v-if="value.key == 'List'">(items:{{value.items.length}})</span> <span @click.stop="removeSection(index,key)" class="pull-right spanWidth"><i class="fa fa-lg fa-close"></i></span> </p> <p v-if="!value.key">{{value.description}}</p> </div> </div> </transition-group> </draggable> </div>

I have a question about when I build the vue-cli project,I do not know how to distinguish the http host in my code. For example:

When I debug in my local environment,My backend api url maybe the: http://localhost:3000.

When I push the code to dev server for tester,the dev backend api url maybe : http://172.110.11.12:80.

When I push the code to release environment,the release backend api url maybe:https://aaa.aa.com.

I do not want to modify the environment api url before I push the code, hot to complete it using the building config?

In node.js environment,I konw I can set the NODE_ENV to complete it,but in front-end vue-cli environment,I do not know.

I have a Vue component with a transition with a dynamic name. I'm trying to find a way to test that the transition name is set properly based on the props I pass into the component. Here's the component.

<template> <aside :class="['cw-vue-modal', modalSizeClass]" v-show="showModal && modalName === currentModalName"> <transition :name="`${effect}-${speed}`" :duration="500"> <div class="cw-vue-modal-wrap" v-show="showModal"> <div class="cw-vue-modal-body"> <header> <h2 v-if="currentModalTitle">{{ currentModalTitle }}</h2> <a href="#" class="cw-vue-modal-close" @click.prevent="closeModal"></a> </header> <article :class="['cw-vue-modal-content', {'cw-vue-modal-pad' : padContent}]"> <slot name="content"></slot> </article> </div> </div> </transition> </aside> </template> <script> import { mapGetters, mapActions } from 'vuex'; export default { name: 'cw-modal', props: { modalName: { required: true, type: String }, padContent: { required: false, type: Boolean }, modalSize: { required: false, type: String }, effect: { required: false, type: String }, speed: { required: false, type: String, default: 'normal' }, maskLight: { required: false, type: Boolean } }, computed: { ...mapGetters(['showModal', 'currentModalName', 'currentModalTitle']), modalSizeClass() { if (this.modalSize === 'small') return 'cw-vue-modal-sm'; if (this.modalSize === 'large') return 'cw-vue-modal-lg'; return 'cw-vue-modal-md'; } }, methods: { ...mapActions(['closeModal']) } }; </script>

I'm using mocha with chia and the avoriaz library to write unit test. Here is the test.

it('it adds the slide slow effect', () => { getters = { showModal: () => true, currentModalName: () => 'my-modal', currentModalTitle: () => null }; store = new Vuex.Store({getters}); const wrapper = mount(Modal, { propsData: { modalName: 'my-modal', effect: 'slide', speed: 'slow' }, store, attachToDocument: true }); expect($('.cw-vue-modal-wrap')).to.have.class('slide-slow-enter-active'); });

It doesn't seem like the class I expect is being inserted into the dom. Any help would be great.

Thanks

i want to use filters to swap returned value into html checklist icon by doing like this

filters: { checkStatus: function(value){ if(value > 0){ return '<span class="bg-orange-400 text-highlight"><i class="icon-check"></i></span>' }else{ return '<span class="bg-teal-300 text-highlight"><i class="icon-cross3"></i></span>' } } }

and in my table i just make it like this

<td>{{props.item.published | checkStatus}}</td>

but it instead returning icon or some html tags, it just returning escaped html. so how to make it return an unescaped value? i tried to use triple curly braces but not working.

or i do it wrong? i know that i can use v-if and v-else in html too, but this way it is more cleaner and i can reuse it for other value.

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>