Software

I'm working on vueJs in symfony project. I have a vue that worked great until few days. I didn't change anything that have something to do with that vue but with no reason since few days, it doesn't work on chrome (wich i use since the beggining) but works great on firefox.

So what I do is a select :

<select v-model="selectedStock"> <option :value="stock.id"v-for="stock in stocks">{{ stock.name }}</option> </select>

my "stocks" ara init with that :

loadStocks () { this.$http({ url: 'api/stocks', method: 'get' }).then( response => { this.stocks = response.data }) },

and my function called by the route api/stocksis :

public function indexAction () { $em = $this->getDoctrine()->getManager(); $stocks = $em->getRepository('RBOrdersBundle:Stock')->findAll(); return new JsonResponse($this->get('rb.serializer')->onEntity($stocks)->toArray()); }

and when i'm going on local/api/stocks I have an array with 2 object

and when in loadStocks() in the response part I do : alert(typeof response.data) chrome give me string and firefox give me Object

And finally the console in chrome show me :

main.js:39752 [Vue warn]: Duplicate value found in v-for="stock in stocks": "0". Use track-by="$index" if you are expecting duplicate values. (found in component: <reassort-tool>) but like 20 times with a bunch of different letter and I'm pretty sure there is no duplicate in my array

i am trying to do a switch case based on a select list that i have on my component.

<div class="col-md-7"> <select class="form-control" id="sel1" v-model="getDocumentSettings.margin" @change="customMargin(getDocumentSettings.margin)"> <option v-for="item in getMarginOptions">{{item}}</option> </select> </div>

getMarginOptions is a computed propertie that returns me a list of choices, that can be

marginOptions: [ "Custom", "Normal", "Narrow", "Moderate", "Wide", "Mirrored", "Office Default" ]

this data is in vuex store and is retrieved, my problem is to change other data based on the selection, when a user select a propertie i want to change margins(left,right,top,bottom) that i have in this object(inside vuex too)

Doc: { key: "Document", left: 0, right: 0, top: 0, fileName: "", bottom: 0, margin: "Custom", },

so i put a swtich case inside my vuex like this:

actions: { customMargin(obj) { switch (obj.data) { case "Custom": obj.type.Doc.left = 0; obj.type.Doc.right = 0; obj.type.Doc.top = 0; obj.type.Doc.bottom = 0; break; case "Normal": obj.type.Doc.left = 1; obj.type.Doc.right = 1; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; case "Narrow": obj.type.Doc.left = 0.5; obj.type.Doc.right = 0.5; obj.type.Doc.top = 0.5; obj.type.Doc.bottom = 0.5; break; case "Moderate": obj.type.Doc.left = 0.75; obj.type.Doc.right = 0.75; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; case "Wide": obj.type.Doc.left = 2; obj.type.Doc.right = 2; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; case "Mirrored": obj.type.Doc.left = 1.25; obj.type.Doc.right = 1; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; case "Office Default": obj.type.Doc.left = 1.25; obj.type.Doc.right = 1.25; obj.type.Doc.top = 1; obj.type.Doc.bottom = 1; break; default: obj.type.Doc.left = 0; obj.type.Doc.right = 0; obj.type.Doc.top = 0; obj.type.Doc.bottom = 0; break; } } }

it should receive a state object so i can access my doc,and the option that was selected, this is how i call it:

methods: { customMargin(option) { this.$store.dispatch({ type: 'customMargin', data: option }) }, },

i think 1 of my problem is the way how i handle actions with vuex, i want to send the option from the select and change the doc margin inside vuex.

Any help?

I came across this issue in my project, and I reproduce it in the following demo: https://jsfiddle.net/baoqger/jeeh5ncp/

Briefly speaking,

var demo = new Vue({ el: '#demo', data: { newitem: '', allData: [], }, methods: { addItem() { this.allData.push(this.newitem); }, sendMessage() { Bus.$emit('send-message'); }, showAll() { console.log(this.allData.length); }, }, })

I use addItem method add item to the allData property,which is a list. And sendMessage to emit event out, which will be listened by child component. The showAll is simply show the current length of the allData list.

for the child component, it goes as following :

Vue.component('service', { template: '<div>' + '<span>{{serviceName}}</span>' + '<button @click="remove">X</button>' + '</div>', props: ['serviceName', 'index'], methods: { remove() { this.$emit('remove'); }, }, created() { Bus.$on('send-message', () => { console.log(this.index); }) }, })

Each child component can be removed by click the x button. And in the created hook, set up the event listen for send-message.

the HTML part is as following:

<div id="demo"> <input v-model="newitem"> <button @click="addItem">Add</button> <button @click="sendMessage">Send Message</button> <button @click="showAll">Show</button> <service v-for="(each, index) in allData" :service-name="each" @remove="allData.splice(index,1)" :index="index"></service> </div>

The confusing point is, for example I add 3 child component. And click the send Message button, I can get 0 1 2, which is expected. But if I remove one child element, and click the send Message button, still get 0 1 2. But the length is 2. So what's wrong with that?

var data = [ { id:1, account_name:'Akshay Patil', debit:111, credit:'' }, { id:2, account_name:'Bharat Chavan', debit:222, credit:'' }, { id:3, account_name:'Chetan Kore', debit:333, credit:'' }, { id:4, account_name:'Dilip Patil', debit:444, credit:'' }, { id:5, account_name:'Eshawr Dange', debit:555, credit:'' }, { id:6, account_name:'farhan Khan', credit:666, debit:'' }, { id:7, account_name:'Ganesh Shine', credit:777, debit:'' }, { id:8, account_name:'Hemant Birje', credit:888, debit:'' } ]

problem happen when object remove from array after random number are generated that time is random number is greater than array of length then error like Cannot read property.

I'm trying to build small application on Vuejs 2.0 where I'm having component file named Text.Vue and following are the components:

<template> <!-- Post --> <div class="blog-item" v-for="item in items"> <!-- Post Title --> <h2 class="blog-item-title font-alt"><a href="#">{{ item.title }}</a></h2> <!-- Author, Categories, Comments --> <div class="blog-item-data"> <a href="#"><i class="fa fa-clock-o"></i> {{ item.created_at }} </a> <span class="separator">&nbsp;</span> <a href="#"><i class="fa fa-user"></i> John Doe</a> <span class="separator">&nbsp;</span> <i class="fa fa-folder-open"></i> <a href="">Design</a>, <a href="#">Branding</a> <span class="separator">&nbsp;</span> <a href="#"><i class="fa fa-comments"></i> 5 Comments</a> </div> <!-- Text Intro --> <div class="blog-item-body"> <p> {{ item.content }} </p> </div> <!-- Read More Link --> <div class="blog-item-foot"> <a href="#" class="btn btn-mod btn-round btn-small">Read More <i class="fa fa-angle-right"></i></a> </div> </div> <!-- End Post --> </template> <script> export default { data() { return { title: 'POST WITH TEXT ONLY', contents: 'Suspendisse accumsan interdum tellus, eu imperdiet lacus consectetur sed. Aliquam in ligula ac lacus blandit commodo vel luctus quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu ultrices mauris.', date_time: '4 December', items: [] } }, beforeCreate() { axios.get('/Blog/api/posts').then(response => { if(response.status === 200) { this.items = response.data.posts } }) } } </script>

While doing npm run dev or compiling the asset file I'm getting and error:

• Cannot use v-for on stateful component root element because it renders multiple elements.

I don't know where I'm doing mistake, help me out in this.

Thanks

How to access JSON objects in the vue.js app I am new in this

import json from './json/data.json'

the JSON file is loaded and now I have to access the objects within it

I'm starting with Vue.js and I'm struggling with the components part.

I've created a component with a template and some data, I want the code to be triggered after creating a new item (cocoon:after-insert event here) :

$(document).ready -> $('*[data-iceberg]').each -> new Iceberg($(this)) $('table.list').on 'cocoon:after-insert', (event, inserted) -> new Iceberg($(inserted), "add") if inserted? $('*[data-unit-name]').each -> $(this).find('.item-population-unit-name').html($(this).attr('data-unit-name')) Vue.component('storing', { template: '<span> {{storingArea}} - {{quantity}} </span>', data: -> { storingArea : 'No area', quantity: 0 } }) new Vue { el: '#storingDisplay' }

HTML/HAML part (the component is called on the 5th '%td') :

%tbody.nested-fields.delivery-item.incoming-parcel-item{ data: { iceberg: true } } %tr.item-display.hidden %td.act - if f.object.destroyable? = link_to_remove_association(content_tag(:i) + h(:destroy.tl), f, 'data-no-turbolink' => true, class: 'destroy remove remove-item') %td.act = link_to("#", class: 'edit edit-item', data: { edit: "item-form" }) do %i = :edit.tl %td %label{ data: { item_value: "input.parcel-item-variant" } }= f.object.variant ? f.object.variant.name : '??????' %label{ data: { item_value: "input.item-non-compliant" } }= non_compliant_message if f.object.non_compliant? %td %label %span{ data: { item_value: "span.total-quantity" } }= f.object.population %span{ data: { item_value: "span.item-population-unit-name" } }= f.object.variant ? f.object.variant.unit_name : '#' %td #storingDisplay %storing %td %label{ data: { item_value: "input.item-delivery-mode:checked" } }= f.object.delivery_mode

The current behavior is that my component is well called and the template rendered correctly on the first item created but only on the first one, it is not on the following ones even if i'm seing <storing></storing> when inspecting the element where the template should be displayed.

I'm probably not using the good practices to achieve what I want and i'm losing myself in the documentation so some help would be welcome :)

I am trying to add the simple jsColor lib to my vuejs project, i am working with webpack simple in vueJS.

So i want to add my script to this component:

<template> <div> <h3 class="text-center">Paragraph</h3> <div class="form-group"> <label for="fontSize" class="control-label col-md-2">font-size</label> <div class="col-md-2"> <input v-model="paragraph.fontSize" type="number" min="1" class="form-control"> </div> <div class="col-md-1"> <img class="changeColor" @click="alignment('left')" width="30" height="30" src="../../assets/left-alignment.png" /> </div> <div class="col-md-1"> <img class="changeColor" @click="alignment('center')" width="30" height="30" src="../../assets/center-alignment.png" /> </div> <div class="col-md-1"> <img class="changeColor" @click="alignment('right')" width="30" height="30" src="../../assets/right-alignment.png" /> </div> <div class="col-md-1"> <img class="changeColor" @click="alignment('justify')" width="30" height="30" src="../../assets/justify.png" /> </div> <div class="col-md-1"> <span>{{paragraph.align}}</span> </div> </div> <div class="row"> <div class="col-md-offset-2 col-md-6"> Color: #<input class="jscolor" v-model="paragraph.color"> </div> </div> <div class="form-group"> <label for="paragraph" class="control-label col-md-2">Text</label> <div class="col-md-8"> <textarea v-model="paragraph.text" class="form-control" rows="5" id="comment"></textarea> </div> </div> <div class="col-md-offset-2 col-md-8"> <button @click.prevent="addParagraph()" class="btn btn-success btn-block">Add Paragraph</button> </div> </div> </template> <script> import jsColor from '../../static/js/jscolor.js'; export default { data() { return { paragraph: { text: "", fontSize: 14, key: "Paragraph", align: "left", color: "000000", paragraph: {} } } }, methods: { addParagraph() { var paragraph = { key: this.paragraph.key, text: this.paragraph.text, fontSize: this.paragraph.fontSize, align: this.paragraph.align, } this.$store.commit("appendToDocument", paragraph) var panelObj = {"section":"paragraph","color":"list-group-item-success","action":"added"}; this.$store.commit("appendToPanel", panelObj); }, alignment(option) { this.paragraph.align = option; } }, } </script> <style> .margin-above { margin-top: 40px } .changeColor { padding: 5px; } .changeColor:hover { background-color: gray; } </style>

i already tried to add the import and the require, the only thing that worked was to use the mounted function inside vuejs lifecycle, but the problem is that it just reflects on the first page load, if open the component again the script is not working.

Any help?

I'm trying to migrate this sample dropdown menu from vue1 to vue2.

http://vuejsexamples.com/vue-dropdown-menu/

I've changed the ready method to mounted, removed the json filter and rewrote the for loop in close because it caused errors in the console.

Right now there aren't any errors while I run this, but still, the dropdown doesn't work properly - it does not close when I click outside of the menu. Can anybody help with migrating this?

new Vue({ el: '#menu', mounted: function() { var self = this window.addEventListener('click', function(e){ if (! e.target.parentNode.classList.contains('menu__link--toggle')) { self.close() } }, false) }, data: { dropDowns: { ranking: { open: false} } }, methods: { toggle: function(dropdownName) { this.dropDowns[dropdownName].open = !this.dropDowns[dropdownName].open; }, close: function() { for (var i = 0; i < this.dropDowns.length; i++) { this.dropDowns[dd].open = false; } } } }) body { margin: 2rem 0; } ul { list-style: none; } .menu { display: flex; } .menu__item { position: relative; padding-right: 3rem; } .menu__link { text-transform: uppercase; } .menu__icon { margin: 0 !important; } .open .dropdown-menu { display: block; } .dropdown-menu { font-size: 0.9rem; position: absolute; min-width: 130px; top: 2.2rem; display: none; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); border-radius: 4px; } .dropdown-menu__item:first-child .dropdown-menu__link { border-top-left-radius: 4px; border-top-right-radius: 4px; } .dropdown-menu__item:last-child .dropdown-menu__link { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .dropdown-menu__link { display: block; padding: 1rem; color: blue; background-color: #fafafa; } .dropdown-menu__link:hover { color: green; background-color: #ccc; } <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script> <div id="menu"class="row"> <ul class="menu"> <li class="menu__item"> <a class="menu__link" href="#">Home</a> </li> <li class="menu__item menu__item--dropdown" v-on:click="toggle('ranking')" v-bind:class="{'open' : dropDowns.ranking.open}"> <a class="menu__link menu__link--toggle" href="#"> <span>Rangliste</span> <i class="menu__icon fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li class="dropdown-menu__item"> <a class="dropdown-menu__link" href="#">Aktuelle Runde</a> </li> <li class="dropdown-menu__item"> <a class="dropdown-menu__link" href="#">Siegerliste</a> </li> </ul> </li> <li class="menu__item"> <a class="menu__link" href="#">Belegungskalender</a> </li> </ul> <pre>{{ dropDowns }}</pre> </div>

I use a global bus to manage emitted and received events between components (sibling to sibling and child to parent). bus is defined as window.bus = new Vue() (which I know is not recommended but I failed to use import in a sustainable way).

It works fine but one drawback of such an approach is that I have to use a handler in the template of my component:

<template> (...) <div v-for="c in aList" v-on:click="emitcasedetails(c)">something</div> (...) </template> <script> export default { (...) methods: { emitcasedetails: function (c) { bus.$emit('casedetails', c._source) }, (...) } </script>

Again, this works fine but requires extra code.

I tried to directly

<div v-for="c in aList" v-on:click="bus.$emit(c._source)">something</div>

but bus is not defined when running the app.

Is a direct reference to the bus in the component's template possible or do I absolutely have to go via a handler?

I have trouble retrieving data from a REST-API using VueJS, axios, Async/Await with Promise(??). I need to call two different REST-APIs. One is giving me a list and I can iterate through it, which is fine.

<template> <div> <div v-if="posts && posts.length"> <div v-for="post of posts"> {{post.name}} <img :src="getUserPicturePath(post.name)" /> </div> </div> </div> </template>

The other, as you can see, in between the v-for, is calling a method which is using axios.

<script> import axios from 'axios' export default { data: () => { posts: [] } created() { // a method to fill up the post-array }, methods: { async getUserPicturePath(name){ const response = await axios.get('linkToApi'+name) console.dir(response.data.profilePicture.path) return response.data.profilePicture.path } } } </script>

The console.dir(response.data.profilePicture.path)- Part is giving the correct Path to the profilePicture, but the <img :src="getUserPicturePath(post.name)" /> above in the <template>, writes [Object Promise].

Any suggestion how I can get the path?

I have single page website, which I develop using vue.js. My main page, 'A', contains two iframes 'B' and 'C', which prevent from the 'back' button from working on the 'A'.

The wanted behavior is that the 'back' bypass the iframe, and influence only on the main page 'A'.

Just for testing, I added a fictive button 'back', which works as wanted on the parent page 'A':

<button @click="back"> back </button> methods: { 'back': function () { window.history.go(-3) } }

How should I bypass the native 'back' behavior to work on the parent page?

My controller

$pdf = PDF::loadView('pdf', $data); $pdf->setPaper('a6', 'landscape')->setWarnings(false); return $pdf->stream();

My function in VueJS

preview() { axios.post('/orders/preview') .then(function (response) { window.open("data:application/pdf," + encodeURI(response.data)); }) .catch(function (error) { // Error callback }); }

However I get this string in return

%PDF-1.3 1 0 obj << /Type /Catalog /Outlines 2 0 R /Pages 3 0 R >> endobj 2 0 obj << /Type /Outlines /Count 0 >> endobj 3 0 obj << /Type /Pages /Kids [6 0 R 10 0 R 13 0 R 18 0 R 21 0 R ...

If I try to open that with window.open it just opens an empty page... Should domPDF not open a new tab automatically with ->stream()? Or how can I open the pdf with the given string in JS?

I have some dynamic <input> elements in my dom rendered from for loop in vue. I need to add ref property to each of them by appending an Id to each ref like element1,element2,..etc. How to do this in vue?

<div v-for="(result, index) in data" :key="index"> <input type="text" type="file" ref="element" /> </div>

How to add ref if result.id exists

I am trying to import a JSON file into my main.js file using this:

import json from 'json/data.json'

Here is my JSON loader and I have also included the loader configurations:

{ test: /\.json$/, loader: 'json' }

Here is the error I am receiving:

ERROR in ./src/main.js Module not found: Error: Cannot resolve module 'json/data.json' in C:\pathto\project\src @ ./src/main.js 27:12-37

at the moment i am doing a file upload, basicly when i select a file i can edit his width and height and other stuffs, but my problem is related to the width and weight, basicly what i need is to get the width and height of the original image size, at the moment i can change it and it is working nice.

So i have this:

<div id="holder" class="col-md-offset-2"> <div v-if="!image"> <input type="file" @change="onFileChange"> </div> <div v-else> <div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-2">width</label> <div class="col-md-10"> <input class="form-control" v-model="docImage.width" type="number" /> </div> </div> <div class="form-group"> <label class="control-label col-md-2">height</label> <div class="col-md-10"> <input class="form-control" v-model="docImage.height" type="number" /> </div> </div> data() { return { image: '', docImage: { key: 'Image', width: '100', height: '100', base64: "", align: "left", }, alignChoices: [ 'left', 'right', 'center' ] } }, onFileChange(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]); }, createImage(file) { var image = new Image(); var reader = new FileReader(); var vm = this; reader.onload = (e) => { vm.image = e.target.result; vm.docImage.base64 = vm.image.split(",")[1]; // get the base64 string defined after the comma }; reader.readAsDataURL(file); }, removeImage: function (e) { this.image = ''; },

I'm currently coding an app using SF3 for the back and VueJs for the front.

I use a controller action with the base route '/' to render the main template (with twig) containing the link to js files and the div binding for VueJs

The Vuejs app is a single page app and uses vue-router. The vue-router mode is set to history in production mode, that's where i have some trouble. The dev config uses the hash so no problem.

I would like to configure my nginx so that :

1. Checks if it matches a vuejs route
2. If not check that it matches a symfony route
3. If not then redirect to some 404 page

1 and 2 can be revert.

My current nginx location is (the default symfony one):

location / { try_files $uri /app.php$is_args$args; }

The issue is that when i reload a vuejs route in the browser i have a 404 errors, however navigating route to route works fine.

If it helps, all my symfony routes are prefixed by api/ or admin/

Thanks for your help !

I have very simple page with routing. Like:

... const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home page</p>' } const Faq = { template: '<p>Faq page</p>' } const routes = [ {path: '/', component: Home}, {path: '/book', component: Book}, {path: '/faq', component: Faq}] const router = new VueRouter({ routes, // short for `routes: routes` mode: 'history' }) ...

Links works inside Vue app. But if I am trying to access directly to site.com/book I am getting 404 error page. I understand that it's virtual routing and it's do not exists on the server. But is there any way to fix it?

If I right remember there was trick with #, but I want to URL directly without any hashes.

I want to save data (objects) in a list in the DB. When sending, I get the response properly, including a key for the newly created item. The problem: Data isn't really saved nor visible!

What's the problem?

try { const response = await this.$firebaseRefs.time.push(...this.timeForm) console.log(response) } catch (err) { console.log(err) }

I am making a filter which takes its filter value from a input tag and when i hit enter it should make a new chip and input tag should be empty again