Vuejs

I have a text-field in Django I'm maintaining using Django-admin that requires preservation of white-space. As a result I'm wrapping it in a <pre> </pre> tag to do this when rendering using vueJS and vue-material.

The whitespace appears to be retained when using this method, and when looking at the descrip field of my model manually in python manage.py shell the whitespace is indeed stored in my db.

However, for some reason there is a mysterious leading white-space tab both at the beginning and end of my HTML when rendered, shown here:

And showing up in the HTML here:

Code snippets:

relevant html and css

<md-layout md-column md-flex-xsmall="100" md-flex-small="55" md-flex-medium="70" md-flex-large="80" id="summary_block"> <md-layout > <pre class="md-body"> [[ product.descrip ]] </pre> </md-layout> </md-layout> #summary_block > div.md-layout > pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; }

Could this be a postgres issue? If so why wouldn't the whitespace show up when looking at object.descrip in the python shell?

I'm using postgres, vuejs, django v 1.10, python 3.5 and vue-material if any/all of that helps.

I'm trying to convert JSX code from example at http://element.eleme.io/#/en-US/component/tree#custom-node-content to Vue $createElement code

original code snippet:

renderContent(h, { node, data, store }) { return ( <span> <span> <span>{node.label}</span> </span> <span style="float: right; margin-right: 20px"> <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button> <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button> </span> </span>); } }

and my attempt to transform:

renderContent (h, { node, data, store }) { return h('SPAN', [ h('SPAN', [h('SPAN', node.label)]), h('SPAN', {attrs: {style: 'float: right; margin-right: 20px'}}, [ h('el-button', { attrs: { size: 'mini', on: { click: this.append(store, data) } } }, 'Append'), h('el-button', { attrs: { size: 'mini', on: { click: this.delete } } }, 'Delete') ]) ]) }

but it fails: the button Append always executed at the time of rendering for every node and never after. While button Delete is never executed at all.

So the question is how to pass an event handler with arguments properly to the created element?

I am using cornerstone to load jpeg or dicom images for slack scrolling example.

Getting base64 from jpeg and dicom, but canvas displaying image like this:

My actually image is like this

Is there any solution or suggestions?

hey guys i am trying to do a request inside my action on the vuex side, and i get this error:

Cannot read property '$http' of undefined

i set my vue-resource this way inside my main.js file:

import Vue from 'vue' import VueResource from 'vue-resource' import VueRouter from 'vue-router' import App from './App.vue' import {routes} from './routes'; import {store} from './store/store'; import VModal from 'vue-js-modal' Vue.use(VModal) Vue.use(VueResource); Vue.use(VueRouter); const router = new VueRouter({ routes }); new Vue({ el: '#app', store, router, render: h => h(App) })

then on the store:

addStyle(state,newStyleObj) { console.log(newStyleObj); var vm = this; this.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj) .then(response => { state.tableStyles = response.body; console.log(state.tableStyles) console.log(response.body) }, error => { console.log(error); }); }

any help?

I am at the beginning of Laravel and Vue and trying to build a simple dashboard application for testing purpose.

I found this fancy Vue dashboard https://github.com/epicmaxco/vuestic-admin

Is there a way to implement this in a clean and easy way into an existing laravel project? Because I am already familiar with the routing and the MVC logic in Laravel and only have a little knowledge in how to manage that in VueJS.

Or is there no point of doing this and I should only use this VueJS dashboard to build up my project from scratch?

I am using VueJs and C# to build a simple aplication, my use case at the moment is to build a select list that has some styles, basicly i can add and remove the styles. My styles model is simple it just has a key(Id that is auto increment in the backend) and a string(that represents the style i want.

Everytime i fire the page, i use a mounted function that should load the styles that already exist on the database, like this:

mounted() { this.$http.get('http://localhost:16339/api/Styles/Getstyles') .then(response => { var vm = this; response.body.forEach(function (style) { console.log(style) vm.$store.commit("initializeStyles", style); }); }, error => { console.log(error); });

every style is a json object like this: {"Id": thStyleId,"style":theStyleName}

as you guys can see i am using vuex, when i load my data i send it to my styles array that is in the store of vuex, since it is shared by multiple components.

the array looks like this:

tableStyles: [],

simple, my html that handles the input of the select list is like this:

<div class="col-md-4"> <select class="form-control" v-model="tableStyle"> <option v-for="(item,key) in tableStyles" :value="item.Id"> {{ item.style }} </option> </select> </div>

i use the id as a key, so i can know each items Id, now i add and remove a style this way:

removeStyle() { var vm = this; console.log(this.tableStyle); if (vm.tableStyle == 1) { alert("CMFtable is the default template you can't remove it, just stop trying!"); } else { vm.$http.delete('http://localhost:16339/api/Styles/DeleteStyle/' + vm.tableStyle) .then(response => { this.getStyleIndex(vm.tableStyle); }, error => { console.log(error); }); } }, addNewStyle() { var Id = this.tableStyles[this.tableStyles.length - 1].Id + 1; var newStyleObj = { 'Id': Id, 'style': this.newStyle }; var vm = this; vm.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj) .then(response => { vm.newStyle = ""; vm.tableStyles.push(newStyleObj) }, error => { console.log(error); }); }, getStyleIndex: function (tableStyle) { this.tableStyles.forEach(function (element, index) { if (element.Id == tableStyle) { vm.tableStyles.splice(index, 1); } }); }

my issue about this, is that everytime i add a new style and try to remove it, it doesn't work, because the Id is autoIncrementing in the server side, so if i remove it next time instead of being Ids: 1,2. it will be: 1,3 (considering i removed the object with id 2.

This only happens if i try to insert and remove without refreshing the page, because if i refresh it passes the id that is in the database, in my code when i add to the select list i just get the last and increment and send it.

So i thaught about some solutions:

• Chaning the auto-increment to manual increment (can have a lot of issues with that, one of them is concurrency;

• trying to refresh the select list, not incrementing the list but refreshing after the insert

so i need some feedback about my issue, if i am in the right way, or if there is another solution to solve my problem.

Thank you for your patience and time :)

I would like to remove a components from Vue at runtime that was previously registered with Vue.component(name, {...}), is this possible ?

We are creating a number of components on the fly in a live development setting and would like to remove old components from memory.

Or is it possible to alter the child components registered with a component at runtime ? Only affecting new component instances built after that of course or refreshed manually.

I'm fetching data from REST api using vue-resource and showing the lists of data in the landing page. User sees the Title and short description, and when clicks on the Title user should go in that page. When I'm using a tag for the URL it's working fine, but when using router-link it doesn't show the Title.

HTML

<div class="food_list_content_bg" id="app-router"> <div class="food_list_content"> <h3><a href="">Article Name</a></h3> <router-link to="restaurant-profile.html"><h5>{{ rest.title.rendered }}</h5></router-link> <ul v-for="csn in rest.cuisine_type"> <li>{{ csn.name }}</li> </ul> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="single_food_list_footer_top"> <a href=""> <ons-icon icon="fa-user" size="20px" fixed-width="false"> </ons-icon> </a> <div class="publisher-name"> <strong>Added By</strong> <p>Board Name</p> </div> </div> <div class="single_food_list_footer"> <p>Picked For</p> <strong>"ITEM"</strong> </div> </div>

JS

(function($){ var config = { api: { restaurants: 'data-url' }, }; var restaurants = new Vue( { el: '#post-list-tmpl', data: function() { return { restaurant: [], cuisin: [] } }, mounted: function () { this.getRestaurant(); }, methods: { getRestaurant: function () { var self = this; $.get( config.api.restaurants, function(r){ self.$set(self, 'restaurant', r); }); } } }); var router = new VueRouter({ mode: 'history', routes: [ { path: 'restaurent-profile.html', name: 'restaurent', component: restaurent }, ] }); new Vue({ router, }).$mount('#app-router'); })( jQuery );

Here's JSFiddle. How to get it work??

Also I need to pass the id of the clicked item to the next page restaurant-profile.html. Is there any to pass that ??

I'm using Vue.js directly including the script. I would prefer a way to do these without installing Vue.js if possible.

I have created vue components for login and registration. How do I send password to the server?? Should I just encrypt the password using bcrypt on the client side and then send it to Laravel or should I just send the plain password to Laravel and use bcrypt($request->get('password')); What would be a good option?

If I should encrypt the password in the vue component, what package/function should I use so that it will encrypt the password in the same way as Laravel/PHP does??

How can I show an image and percent of page loaded before it's fully loaded? Like http://vyctoire.com

And how can I re-use it in Ajax calls?

I am in the need of splicing a data from the array, for which i have used the following,

Html:

<div id="app"> <select v-model="facilityAvailable" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control"> <option v-for="availability in availableFacilities" v-bind:value="availability">{{availability.label}}--</option> </select> <a @click="removeFacilities" class="btn btn-default remove_option" rel="facilities2" id="remove"><i class="fa fa-arrow-left"></i></a> <a @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add"><i class="fa fa-arrow-right"></i></a> <select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities2" size="4" class="form-control"> <option v-for="facility in selectedFacilities" v-bind:value="facility">{{facility.label}}</option> </select> </div>

Script:

new Vue({ el: "#app", data: { facilityAvailable: [], facilitySelected:[], availableFacilities: [{ value: 0, label: 'Double (Non a/c)' }, { value: 1, label: 'Premium Double (a/c)' }, { value: 2, label: 'Standard Double (a/c)' } ], selectedFacilities: [], }, methods: { removeFacilities(index) { this.availableFacilities = this.facilitySelected.concat(this.availableFacilities); this.selectedFacilities.splice(index,1); }, addFacilities(index) { this.selectedFacilities = this.facilityAvailable.concat(this.selectedFacilities); this.availableFacilities.splice(index,1); } } })

Here i am doing like transfer of one element from one select box to the other to another select box, for which i have used concat for adding to another and splice to remove that element.. Everything was fine upto this. But when i splice , it is splicing in the order of 0,1,2 i need to splice based on the index number of that particular element. In clear, i can select and remove the element in any order for which that particular element needs to be removed and gets transferred into second select box, whereas now if i remove it in the order as it was , its working fine but whereas if i change the order and splice its not working. Also when i select multiple elements and remove, the same thing happening. Kindly help me to solve this issue.

The fiddle link was, https://jsfiddle.net/pmvp3td6/

I am stuck in a situation where the (Laravel) Controller is providing a view to insert into the frontend using Ajax like this:

MyController.php

return Response::json(['html' => View::make('my_blade_view', [ 'items' => $items ])->render()]);

Within my_blade_view.blade.php, I need to add some Vue.js functionality, like this:

my_blade_view.blade.php

<div v-on:click="myVueMethod"></div>

The problem is, when the Ajax call completes, although the HTML from my_blade_view.blade.php is successfully inserted into the page (which is another Blade view), the v-on:click functionality does not run. I am wondering if there is a way I can tell the Vue instance to re-process the page when the Ajax call completes so that it picks up the new Vue code I have added in the template which was rendered by the Controller?

Thank you.

In my laravel vue 2 project, I am getting this error. For recursive components, make sure to provide the "name" option.

I am trying to use one components inside another.

Child component that I want to insert is located at sign/One.vue I am trying to show this components in reg components located inside components folder

<script> import One from './sign/One.vue'; export default { data(){ return { } }, components: { 'one': One } } </script

The trying to use this component like <one></one> and this generate Unknown custom element: <one> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

In my last project I did similar set up and it worked but this time not working..

In my app.js file I have

Vue.component('reg', require('./components/reg.vue')); const app = new Vue({ el: '#app' });

Hey I'm a front end developer looking to integrate some back end data that is using vue JS, which I am very new to.

I have a form, and when the user clicks "edit" I am showing that same form but I want the values to be populated.

Here is the relevant JS:

$(document).ready(function() { new Vue({ el: 'body', data: { editMode: false, challenge: null, challenges: <%= raw @campaign.challenges.to_json(include: [:challenge_tags, :challenge_filters], methods: [:has_link, :encoded_link, :is_active, :contact_count, :total_clicks, :default_image, :completions, :total_targeted, :total_contacts]) %>, }, methods: { edit: function(challenge) { this.editMode = true; this.challenge = challenge; ** } } }) });

** this was a suggestion but it didn't seem to work.

Here is the HTML:

<input class="input" type="text" placeholder="challenge name" v-model="challlenge.name">

This, for example, is working correctly:

<span v-if="editMode">Edit</span>

It is ideal to make it work with v-model.

Any advice helpful!

Up till now, I've used sass together with Grunt, the result being that I compile x .scss files into style.css.

I've only done one project in React and it's my first time working with Vue.js, so there a a few things I'm trying to understand.

If I want to include css styling in the same file as my Vue component, I can simply use

<style lang="sass"> @import '_card.scss' // Custom CSS code here </style>

From what I understand, Vue takes all the styling from all the .vue files and compiles it into style.css. But since I'm not sure, I ask this;

1. Are Vue components called in runtime and does that mean that specific parts of styling is compiled instead of loading all styling in one file?

2. I'm not a big fant of putting styling inside Vue component files. How can I load global styles? If I remember correctly, I had to load the css file in each React component and I don't see the point in this. I just want to load the style in the header.

So after trying out Vue.js for a little while, it got me thinking...Why do we have to use components? I don't understand the hype behind them as I can just take a for loop and create a div and get the exact same output as if I were using components.

Vue.js's documentation even says:

Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code.

But again, it seems it can be done with for loops what Components give you.

The same goes for React as well.

If someone can explain it better, I am all ears.

Thanks.

I completed my first Electron app earlier this year using Vue.

I'm using Laravel Mix to compile my applications assets, which works absolutely fine until I need to use the main Electron process.

What I'm trying to do is detect when the main process is resumed after being asleep with the following in my main.js

mb.on('ready', () => { electron.powerMonitor.on('resume', () => { mb.window.webContents.send('resume'); }); });

So when the system is resumed, I'm sending an event ready for consumption in the renderer.

Here is my main app.js for my Vue application.

mounted: function() { var self = this; require('electron').ipcRenderer.on('resume', (event) => { if(self.socket.connected) { self.$store.dispatch('socket/reconnect'); } }); },

I believe my code is correct, but I'm unable to compile my assets with Laravel Mix.

When I compile using npm run prod I get the following error.

This dependency was not found:

• fs in ./~/electron/index.js

I then tried to install fs (even though I don't think it's necessary) with npm install --save fs but the problem still persists.

After more searching around, some people were suggesting to use the following in my webpack config. So I added it to my webpack.mix.js, leaving my entire Laravel Mix config looking like so:

const { mix } = require('laravel-mix'); mix.js('src/js/app.js', 'app/assets/js'); mix.sass('src/sass/app.scss', 'app/assets/css').options({ processCssUrls: false }); mix.webpackConfig({ target: "electron-renderer" });

But now I get a different error.

This relative module was not found:

• ./package in ./~/got/index.js

And this is where I'm stumped. I have no idea what to search for and would love if someone could help ease me into the right direction.

Thanks in advance.

Scenario

Suppose I have a web service capable of fetching a webpage and its static assets (e.g. using PhantomJS). I want to be able to serve the static DOM sub-structure (e.g. everything under the #content div) along with its styling to a new site that shows the extracted webpage on the left side along with the amazing results of my super-amazing awesome machine-learning algorithm for extracting information from webpages on the other side.

Question

Supposing I can send down the HTML sub-structure, CSS, and other asset files down from the server, how do I go about injecting the HTML substructure into a div on my page while scoping the styling?

<!-- partially modified content pulled from another site --> <div id="content"> <!-- I might pull stylesheets from head of source site --> <!-- and inject them in content? Or should I just keep --> <!-- track of styles separately and manually inject them? --> <link rel="stylesheet" type="text/css" href="theme.css"> <img src="new/path/to/static/resource/that/i/saved"/> </div> <!-- my own web page with stuff etc --> <div id="left"> <!-- INSERT CONTENT DIV AND OTHER ASSETS HERE --> </div> <div id="right"> <!-- here I have Vue components and other page interaction stuff --> </div>

Currently I'm using VueJS for my webpage. I know I can do style scoping using Vue components -- maybe there is a way to leverage that? But I really want to know how to solve this problem in a general, framework-agnostic way. I'm too paralyzed by all these things I think could go wrong to even start...

Hello what i am trying to do is when user select SILVER from select input to display an image and a price, if user select gold a golden ring with new price to display.[i am new in vue.js sorry guys! ] Here is my code:

<div class="hello"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> <img :src="options.value" width="100%" v-if="option in options"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div> <script> export default { name: 'hello', data () { return { msg: 'BoostMe', selected: 'A', options: [ { text: 'One', value: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKv4- hzPfbogecrmFiBXb2F4Ps9bmFM7gpD_2JM31eWiMIs7RvmmriQuw' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] }

I have my navigation like this

<nav> <ul class="nav nav-list"> <router-link tag="li" to="/"><a href="#">Home</a></router-link> <router-link tag="li" to="/page1"><a href="#">Page1</a></router-link> <router-link tag="li" to="/page2"><a href="#">Page2</a></router-link> </ul> </nav>

I want the link to Page1 to be active when ever am in page1 and same for Page2. It is working fine, the links are been activated when I navigate to the pages BUT the problem is that to link to the root (/) page is always active even when I leave the page.