Vuejs

I am new in vue.js. I have couple of elements on my sites that came from laravel backend. I want vue to display as default only two and load more elements after button click on the same site. Do you have some hint for me how to do that?

This is Blade.php file

@foreach(array_merge($specialoffers1,$specialoffers2,$specialoffers3) as $offer) <a href="{{URL::action(" BPM\Controllers\Web\EstateController@getEstateDetails ", array('type' => HTML::estateTypeUrlSlug($offer), 'oferta' => HTML::estateUrlSlug($offer)))}}"> <div style="background-image:url({{ $offer->getFirstPicture() }})"> <figcaption> <span> @if(strlen($offer->getLocationCity())>21) {{ substr($offer->getLocationCity(),0,strpos($offer->getLocationCity(),' ')) }} @else {{ $offer->getLocationCity() }} @endif </span> @if($offer->getLocationStreet()) <p> <span> @if(strlen($offer->getLocationStreet())>30) {{ substr($offer->getLocationStreet(),0,strpos($offer->getLocationStreet(),' ',15)) }} @else {{ $offer->getLocationStreet() }} @endif </span> </p> @endif </figcaption> </div> </a> <a href="{{URL::action(" BPM\Controllers\Web\EstateController@getEstateDetails ", array('type' => HTML::estateTypeUrlSlug($offer), 'oferta' => HTML::estateUrlSlug($offer)))}}"> <span>{{$offer->getOfferType()}}</span> <span>{{ HTML::formatArea($offer->getArea()) }}</span> @if($offer->getApartmentRooms()) @if($dictionary == 1) <span>{{ $offer->getApartmentRooms() }} @if($offer->getApartmentRooms()== 1) pokój @elseif ($offer->getApartmentRooms() > 1 && $offer->getApartmentRooms() < 5) pokoje @else pokoi @endif</span> @else <span>{{ $offer->getApartmentRooms() }} @if($offer->getApartmentRooms()== 1){{DictionaryHelper::getValue($dicPack,$dictionary,'room')}} @else {{DictionaryHelper::getValue($dicPack,$dictionary,'rooms')}} @endif</span> @endif @else <span> &nbsp; </span> @endif <span>{{ HTML::formatPrice($offer->getPrice(),$offer->getPriceCurrency()) }}</span> </a> @endforeach

Is there an analogue library fullpage.js for Vue? Need a component that can scroll through components as well as for fullpage.js.

I am using Webpack 2 and importing my components via special require syntax. Here is code:

// app.js var myMixin = { created: function () { console.log('mixin hook called'); } } Vue.component("foo", resolve => { require(['./components/foo.vue'], resolve); });

I want to apply myMixin to foo component, but how to do that? Global mixin apply to all components, but that's not what I need.

I have a flask page that is for editing blog posts. It has the following vue:

<form method="POST" action="{{ url_for('edit',itemid=item.id) }}" id="text-input"> {{ form.csrf_token }} <div style="margin-left:30px;margin-top:20px;"> Title: {{ form.title }} </div> <br/> <div id="editor"> Content: {{ form.content( **{':value':'input','@input': 'update'}) }} <div v-html="compiledMarkdown"></div> </div> <br/> Category: {{ form.category|safe }} <br/> <input type="submit" value="Save"> </form> <script> new Vue({ el: '#editor', data: { input: "starting data" }, computed: { compiledMarkdown: function () { return marked(this.input, { sanitize: true }) } }, methods: { update: _.debounce(function (e) { this.input = e.target.value }, 300) } }); </script>

What I would like to do is have a starting value for input based on something sent in by flask. Basically I would change input: "starting data" to input: {{ form.content.data }}. However, when I do this, it stops updating the input when I change the text in the box. I think I am kind of hardcoding the data to be whatever what in form.content.data as opposed to a string.

How can I pass this in so that it starts with the form.content.data value yet is still changeable?

There is fully working code on the post editing page

<a href="#" v-on:click="confirm = 1" v-show="!confirm" class="btn btn-xs btn-danger">Delete</a> <span v-if="confirm"> Are you sure? <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">Yes</a> <a href="#" v-on:click="confirm = 0" class="btn btn-xs btn-success">No</a> </span>

var app = new Vue({ el: '#app', data: { confirm: 0 } });

I need the same functionality only on the page where the information for each post is displayed in the table. That is, if you see 10 lines, then you need a button for each line.

I tried to do this:

<a href="#" v-on:click="confirm[{{ $news->id }}] = 1" v-show="!confirm[{{ $news->id }}]" class="btn btn-xs btn-danger">Delete</a> <span v-if="confirm[{{ $news->id }}]"> Are you sure? <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">Yes</a> <a href="#" v-on:click="confirm[{{ $news->id }}] = 0" class="btn btn-xs btn-success">No</a> </span> And this:

<a href="#" v-on:click="confirm[{!! $news->id !!}] = 1" v-show="!confirm[{!! $news->id !!}]" class="btn btn-xs btn-danger">Delete</a> <span v-if="confirm[{!! $news->id !!}]"> Are you sure? <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">Yes</a> <a href="#" v-on:click="confirm[{!! $news->id !!}] = 0" class="btn btn-xs btn-success">No</a> </span>

var app = new Vue({ el: '#app', data: { confirm: [] }, created: function () { var items = this.confirm; var news = {!! $news->toJson() !!} news.data.forEach(function(element) { items[element.id] = 0; }); } });

But it does not work.

I think this is a common task and it has already been done many times, but I am new in vuejs and I don't know how to implement it.

Help me, please!

I'm trying to filter a list when typing to text box which I get from Ajax call. The problem seems to be that the filter is applied before Ajax is ready.

HTML:

<table> <tr v-for="food in filteredItems"> <td>{{ food.name }}</td> <td>{{ food.energy }}</td> </tr> </table>

helpers/index.js:

export default { getFoods() { return Vue.http.get('http://localhost:3000/foods/allfoods').then((response) => { return response.data; }); } }

Vue component:

import helpers from '../helpers' export default { name: 'Search', mounted() { helpers.getFoods().then((response) => { this.foodData = response; }); }, data() { return { searchTerm: '', foodData: [], } }, computed: { filteredItems() { return this.foodData.filter(function(food){return food.name.toLowerCase().indexOf(this.searchTerm.toLowerCase())>=0;}); } }

When I load the page or start typing I get

'TypeError: undefined is not an object (evaluating 'this.searchTerm')'.

Everything works perfectly if I hard-code the foodData array.

Have I misunderstood something and/or what am I doing wrong?

My vue component like this :

<template> <div class="row"> <div class="col-md-3" v-for="item1 in items1"> ... </div> <div class="col-md-3" v-for="item2 in items2"> ... </div> <div class="col-md-3" v-for="item3 in items3"> ... </div> </div> </template> <script> export default { ... computed: { items1() { const n = ... // this is object return n }, items2() { const n = ... // this is object return n }, items3() { const n = ... // this is object return n } }, ... } </script>

If the three loop complete, I want to call a method

So the method is executed when the three loop completes

How can I do it?

I'm trying to send form data from Vue Resource to my PHP page. I can see it displayed on the PHP page but when I send it back as JSON I get an empty response. Would appreciate some help.

PHP:

if(isset($_POST['submit']){ echo json_encode($_POST); }

JS:

this.http.post('addalbum.php', new FormData($('#submitalbum'))) .then(data => console.log(data));

my OS - Linux Ubuntu 16.04 and I have the desktop application made with Electron-Vue

For example, I want to add button with function of sending data to arduino uno by serial port. But I cannot import serialport module to my Vue component. Also, I tried to use serialport-electron module, but result is the same. Is there any way to solve this problem? I think that my code is not important here, but if somebody will ask, I will attach it to this post. Thank you

I've got a component and I would like to set a data item outside the component.

How would I do this with a directive?

I was thinking about something like this:

Vue.directive('init', { bind: function(el, binding, vnode) { vnode.context[binding.arg] = binding.value; } });

But that binds to v-model I need to bind to a data item.

So I can say:

<date-picker prp-name="date_of_birth" v-init:date="'old('date_of_birth')'"></date-picker>

I am trying to insert something like this into my website: https://vuejs.org/v2/examples/

In their example, the html looks like:

<div id="editor"> <textarea :value="input" @input="update"></textarea> <div v-html="compiledMarkdown"></div> </div>

my flask form looks like:

<form method="POST" action="{{ url_for('edit',itemid=item.id) }}" id="text-input"> {{ form.csrf_token }} <div style="margin-left:30px;margin-top:20px;"> Title: {{ form.title }} </div> <br/> Content: {{ form.content(cols="80", rows="50", id='larger')|safe }} <br/> Category: {{ form.category|safe }} <br/> <input type="submit" value="Save"> </form>

so somehow I need to change the line Content: {{ form.content(cols="80", rows="50", id='larger')|safe }} to indicate that it is using :value="input" and @input="update" . How can I do this? Do I do it in the Form definition on the server? Or perhaps with jquery once the page has been loaded?

I'm having what appears to be a rendering problem in Chrome.
I have a scrollable ul block that contains ~230 li items, each 80px tall, that is clipped by a white rectangle around the 70th item, until the end. The clipping area does not appear in the inspector, it is purely visual.
The hidden content is also still perfectly accessible and clickable, like normal.

The problem only appears in Chrome (MacOS), not even Chromium, and depends on the height of the viewport. Toggling the inspector, for example, will change the rendered height without any logic.

I tried to toggle pretty much every CSS that is applied to the related divs, without any success. I can't really post any code here since I don't know which part is responsible, but I'd be happy to if you have any clue.

Also, I'm using vue.js; the items are rendered by a v-for loop, I don't know if this is relevant here.

The issue I am having is similar to this question: Vue.js/vuex ajax update components with ajax state

First, I want to load some static topojson file to the store. This happens on mount of the main vue instance in main.js:

new Vue({ ... mounted () { this.$store.dispatch('topojsonStore/loadMunicipalityTopo', 'static/topojson_data/gem_2014.topojson') } })

This gets loaded in the store without problems. In the component where I want to visualize this data, I can access this data from the store just fine:

computed: { getMunicipalityTopo () { return this.$store.getters['topojsonStore/getMunicipalityTopo'] } }

I put the drawing functionality under a method in the component:

methods: { plotMunicipalities () { var width = 650, height = 770 var path = d3.geoPath() .projection(null) // TODO: fix projections var svg = d3.select('#map').append('svg') .attr('width', width) .attr('height', height) // Load topojson from store let topoJsonData = this.getMunicipalityTopo svg.append('path') .attr('class', 'municipalities') .datum(topoJsonData) .attr('d', path) }

This works fine if I attach this to a click event in the template, like so:

<button @click="plotMunicipalities()">Plot municipalities</button>

I want, however, to draw this stuff automatically when the page is loaded, and not after a click event. This is where I run into the asynchronicity issues... Putting this in the component, for example, does not work, as the data in the store is still not loaded:

mounted () { this.plotMunicipalities() }

How should I go from here? How can I trigger the function when the data in the store is loaded? I should mention that later, different layers will be loaded. Some layers will be unchangeable by the user, but for this particular layer it will be possible for the user to change it. Should I use a different workflow for these different layers?

I have a problem with documents, i want to download for the user after he started a export in my client.

The generation of the documents works fine and so the first part of my code. so everything until the last for loop is just for context. the first document in the for loop is downloading but the .click function somehow breaks my for loop. So after this line of code nothing is happening. I also tried to click with jQuery using the id of the new element. I am a little bit lost on this.

object.checked is a Object which contains every entity and a boolean which says if a document should be created.

object.usedFormats is a Object which contains also every entity and a integer which says if it should be created as excel or pdf file.

var docs = [] for(var prop in object.checked) { if(object.checked[prop] == true) { var a = document.createElement('A') if(object.usedFormats[prop + 'Format'] == 0) { a.href = 'api/export?type=' + prop a.target = "_blank" } else if(object.usedFormats[prop + 'Format'] == 1) { //TODO pdf Aufruf sobald Feature verfügbar a.href = 'api/exportpdf?type=' + prop a.target = "_blank" } else { Toastr.error('Falsches Format für Export gewählt!') } docs.push(a) } } for (var i = 0; i < docs.length; i++) { docs[i].id = 'dllink' + i document.body.appendChild(docs[i]) docs[i].click() document.body.removeChild(docs[i]) }

I need import some variable to vue component file. I am doing it this way:

require('imports-loader?myVar=>{test:12345}!./my-com.vue');

As result I get [Vue warn]: Error in render function: "ReferenceError: myVar is not defined"

I know about props, but I want pass namely a variable.

Here "my-com.vue":

<template> <div>...</div> </template> <script> console.log(myVar); // <--- here I get vue warn export default { props:['rows'], ... } </script>

Where I am wrong?
How it possible to import a variable to vue component file?

Thanks in advance.

I want to make the put, delete request with authorization header in vue.js. This is the request.

Put request:

PUT https://api.petbacker.com/v4/account/a20343be-6c9f-11e7-8c94-42010af001bb HTTP/1.1 User-Agent: Fiddler Host: api.petbacker.com Content-Length: 82

{ "accountInfo" :{ "email": "iwillverifyemail@petbacker.com" } }

Delete request:

DELETE https://api.petbacker.com/v4/account/a20343be-6c9f-11e7-8c94-42010af001bb/logout HTTP/1.1 User-Agent: Fiddler Host: api.petbacker.com Content-Length: 82 Authorization: RA a20343be-6c9f-11e7-8c94-42010af001bb:86aaccf288b7e4dc7692e4030dc96ace3ac009d3

{ "accountInfo" :{ "email": "iwillverifyemail@petbacker.com" } }

This is my code.

this.$http.put(url, accountInfo, {headers: {'Authorization': authHeader}}) .then((response) => { // if succeed }) .catch(e => { console.log(e) }) this.$http.delete(url, accountInfo, {headers: {'Authorization': authHeader}}) .then((response) => { // if succeed }) .catch(e => { console.log(e) })

I'm not sure it is correct. Let me know if you can solve this problem.

vue app is inside : C:\xampp\htdocs\booking

Laravel api is inside : C:\xampp\htdocs\booking-api

FYI : vue app is working on http://localhost:8080

If the folder structure is like above, then app works fine i can call the api like this,

axios.get('http://localhost/booking-api/public/Rooms').then((response)=>this.items = response.data);

But I want booking-api folder inside booking folder. If I place it and if I call the api like below,

axios.get('/booking-api/public/Rooms').then((response)=>this.items = response.data);

It wont work and the console window is like this,

Request URL:http://localhost:8080/booking-api/public/Rooms Request Method:GET Status Code:404 Not Found

So, how can I place api project inside vue app and how to call the api from vue.

Using Vue generated Vuecli with the webpack build. There's a lot of magic going on. What I can't figure out is how to generate the vendor prefixes needed for IE.

This was copied from github issue: https://github.com/vuejs-templates/webpack/issues/421#issuecomment-284322065

vue-loader.conf.js

var utils = require('./utils') var config = require('../config') var isProduction = process.env.NODE_ENV === 'production' module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), postcss: [ require('postcss-import')(), require('autoprefixer')({ browsers: ['ie >= 9'] }) ] }

Simple container component example

container/index.vue

<template> <div class="container"> <slot></slot> </div> </template> <script> import './index.scss' export default {} </script>

container/index.scss

// this is aliased in webpack.base.conf @import "~styles/base-config"; .container { @include grid(); // this generates display:flex and border-box resets max-width: 100%; margin: 0 auto; }

Expected inline output generated in the head, (but currently don't get -ms-flexbox or -webkit- prefixes )

<style> .container { -webkit-box-sizing: border-box; // not generated box-sizing: border-box; display: -webkit-box; // not generated display: -ms-flexbox; // not generated display: flex; max-width: 100%; margin: 0 auto; } </style>

Related:

• webpack2 vue-cli autoprefixer not work in js file when require scss file？

here is a piece of my code:

$(function () { var vm = new Vue({ el: '#app', data: { myObject : { id: "", _class : "", contentType : "TEXT", textValue : "", }, selected_language : "ENGLISH", }

I want to find a way to fill the textValue property with what is in selected_language. which mean that my object will look like:

myObject : { id: "", _class : "", contentType : "TEXT", textValue : "ENGLISH", }

Thanks for your help in advance, I am quite stuck

I have problem while working with nuxt js, for example when im working with vuejs webpack i have the following code and it works fine.

<div class="col span-1-of-2 navigation-terms"> <ul class="nav-terms"> <router-link :to ="{name: 'usering'}" tag = 'li' style="cursor:pointer;">Terms of use</router-link> <router-link :to ="{name: 'Conf'}" tag = 'li' style="cursor:pointer;">Confidentiality </router-link> </ul> </div> <div class="col span-1-of-2 display-terms"> <transition enter-class="" enter-active-class="animated fadeInRight" leave-class = '' leave-active-class = ''> <router-view> </router-view> </transition> </div>

However when im trying to implement something similar in nuxt.js by using this code:

<template> <div class=""> <nuxt-link to='sub/sub1'>Press me </nuxt-link> <nuxt-link to='sub/sub2'>Press me2 </nuxt-link> <h1>THAT TEXT IS MEANT TO STAY HERE RIGHT?</h1> <nuxt-child/> <nuxt-child> </nuxt-child> </div> </template>

It doesnt work, it redirects me to page that i need but it removes all the parent elements. Like in this case all the nuxt-links should stay there as well as the h1 text. So what am i doing wrong?

This is a full repo:https://github.com/StasB93R/nuxt-child

P.S i know i have nuxt-link/ plus opening and closing tags of the same sort, i just put 2 of them for the testing purposes I would highly appreciate any help