Vuejs

I am fairly new to VueJS and I just want to make sure that the following code is written properly (and that there is not a better way to do this).

Here is the code:

<template> <section class="hero" :style="bgSrc"> <slot></slot> </section> </template> <script> export default { props: [ 'src', 'srcXs', 'srcSm', 'srcMd', 'srcLg', 'srcXl' ], data () { return { xs: 0, sm: 600, md: 1024, lg: 1440 - 16, xl: 1920 - 16, sourceImage: '', screenWidth: '' } }, computed: { bgSrc () { if (this.src) { return { backgroundImage: 'url(' + this.sourceImage + ')' } } } }, mounted () { let screenWidth = document.documentElement.clientWidth if (screenWidth >= this.xs && screenWidth < this.sm) { this.sourceImage = this.srcXs } if (screenWidth >= this.s && screenWidth < this.md) { this.sourceImage = this.srcSm } if (screenWidth >= this.md && screenWidth < this.lg) { this.sourceImage = this.srcMd } if (screenWidth >= this.lg && screenWidth < this.xl) { this.sourceImage = this.srcLg } if (screenWidth >= this.xl) { this.sourceImage = this.srcXl } } } </script>

The goal is to create a background image for a hero section, but allow for different sized images for different screen sizes.

Here is how an implementation would look:

<template> <hero-section class="full secondary" src="http://via.placeholder.com/480x270" src-xs="http://via.placeholder.com/480x270" src-sm="http://via.placeholder.com/720x405" src-md="http://via.placeholder.com/1440x810" src-lg="http://via.placeholder.com/1920x1080" src-xl="http://via.placeholder.com/2560x1440" > <v-container fill-height> <v-layout column align-center justify-center> <!-- TEXT GOES HERE --> </v-container> </hero-section> </template>

Am I doing this right, or is there a better way to do it?

Thanks.

I'm trying to pass an object as a property once I get it back from the server but I get this error:

Property or method "section" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Error in render function: "TypeError: Cannot read property 'name' of undefined"

Here is my form.ts:

import Vue from 'vue'; import { Component } from 'vue-property-decorator'; import { Form } from '../../models/models'; @Component({ components: { SectionComponent: require('../section/section.vue') } }) export default class FormComponent extends Vue { form: Form = <Form>{}; mounted() { fetch('forms/new-instance/2') .then(response => response.json() as Promise<Form>) .then(data => { this.form = data; }); } }

form.vue:

<template> <section class="section"> <h2 class="title">{{form.formName}}</h2> <b-tabs type="is-boxed" position="is-centered"> <b-tab-item v-for="page in form.pages" :label="page.name" :key="page.id"> <section-component v-for="section in page.sections" :key="section.id" :section="section"> </section-component> </b-tab-item> </b-tabs> </section> </template> <script src="./form.ts"></script>

section.ts:

import Vue from 'vue'; import { Component, Prop, Watch } from 'vue-property-decorator'; import { Section } from '../../models/models'; @Component({ components: { QuestionComponent: require('../question/question.vue') } }) export default class SectionComponent extends Vue { @Prop() section: Section; }

section.vue:

<template> <div class="box"> <legend class="subtitle">{{section.name}}</legend> </div> </template> <script src="./section.ts"></script>

Finally, my interfaces:

export interface Section { id: number; name: string; } export interface Page { id: number; name: string; order: number; formId: number; sections: Section[]; } export interface Form { formName: string; formId: number; pages: Page[]; }

I believe the issue is to do with my <section-component></section-component> but I'm not sure where I am going wrong? Any help would be appreciated, thanks.

After reading docs & forums for hours... still have no answer.

Have the following JS/HTML:

Vue.component("my-component", { props: ["id"], render: function(h) { return h("tr", this.$slots.default); } }); var vapp = new Vue(); <script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script> <table> <tr is="my-component" :name="yo"> <td> <span v-text="name"></span> </td> </tr> </table>

Use tr + "is" attribute to specify component within the table otherwise browser will hoist it out as invalid content. Done

Use render + h("tr"...) because vuejs doesn't render tr element, but instead table > td and again browser hoist it out.Done

Now I have table > tr > td rendered well but how can I add children bound to the props/data, so I will see "yo" on the screen.

Thanks a lot!

New to Vue.js and bulma. I am trying to get a modal pop up to work, so far I have this from including the modal component in the main App.vue file:

<template lang="pug"> div#app navigation-menu menu-modal transition(name="fade") router-view </template>

I only want the modal to show if the data is set to true here (still in App.vue, inside the script tags):

export default { name: 'app', components: { NavigationMenu, MenuModal }, data: { showModal: true } }

I tried adding this inside the template tags (Vue.js):

But the modal just disappeared from the page, even when showModal is set to true in data.

Any idea how to make the modal appear when data is set to true and disappear when set to false?

I have the following piece of code:

<div id="app"> <input type="text" name="" v-model="user.phones"> </div> <script> new Vue({ el: '#app', data() { return { user: { phones: [] } } } }); </script>

Whenever user writes a phone, I want that to be injected in the user.phones model. But since the phones model is an array, the number is not being assigned to user.phones

I have app in Laravel and Vue.js. In navbar.blade.php I did something like this:

<p>{!! $test !!}</p>

Now I want to change that variable to text using only routing. Can I do it? How?

If not, how I can keep that variable but change it in vue.js?

I am currently trying to convert our existing vue.js project into nuxt.js. I am unable to add flowtype support in nuxt.js. when i run the flow server it says no errors!! but running npm run dev, its throwing error on the flow syntax.

.flowconfig [include] pages/**/.* components/**/.* layouts/**/.* apiRoutes/.* store/.* utils/.* [ignore] .*/build/.* .*/config/.* .*/dist/.* .*/node_modules/.* .*/static/.* .*/test/.* .*/ssl/.* .*/.nuxt/.* [libs] ./flow/ [options] emoji=true module.file_ext=.vue module.file_ext=.js server.max_workers=3 log.file=./flow.log suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe unsafe.enable_getters_and_setters=true module.system.node.resolve_dirname=node_modules module.name_mapper='^.*\.css$' -> 'empty/object' module.name_mapper='^.*\.js$' -> 'empty/object' module.name_mapper='^@/\(.*\)$' -> '<PROJECT_ROOT>/\1'

i've added all the neccessary babel and eslint packages.

.babelrc { "presets": [ ["env", { "modules": false }], "stage-2", ["es2015", {"modules": false }], "flow-vue" ], "plugins": [ "transform-runtime", "transform-class-properties", "syntax-flow", "transform-flow-strip-types" ], "comments": false, "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } } } .eslintrc.js module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, jquery: true }, extends: [ 'standard', 'plugin:flowtype/recommended' // 'plugin:vue/recommended' ], // required to lint *.vue files plugins: [ 'html', 'flowtype-errors', 'flowtype' ], // add your custom rules here rules: { 'flowtype-errors/show-errors': 2, // allow paren-less arrow functions 'arrow-parens': 0, 'semi': ["error", "always"], // allow async-await 'generator-star-spacing': 0 }, globals: {} }

On running npm run dev, it doesnt parse flowtype syntax

Good day :)

Got to study Vue.js 2nd version, everything is still going according to plan, but there are some nuances and I would like to hear a pro

Now we turn to the essence of the problem

On the site there is a language switch, it works all by standards, in the template comes arrays of languages:

$headerBar = [ 'langs' => [ [ 'name' => 'Українська', 'img' => 'images/flags/ua.png', 'code' => 'ua', 'active' => true, ], [ 'name' => 'Русский', 'img' => 'images/flags/ru.png', 'code' => 'ru', 'active' => false, ], [ 'name' => 'English', 'img' => 'images/flags/uk.png', 'code' => 'uk', 'active' => false, ] ] ];

Language output template:

<template slot="language-bar"> <language-switcher v-bind:langs='{!! json_encode($langs) !!}'></language-switcher> </template>

And the component vue.js itself:

<template> <div class="lang-currency-switcher-wrap" :class="{ show: isVisible }"> <div class="lang-currency-switcher dropdown-toggle" @click="isVisible = true"> <span class="language"> <img :alt="activeLang.name" :src="activeLang.img"></span> <span class="currency">{{ activeLang.code }}</span> </div> <div class="dropdown-menu"> <a v-for="lang in langs" v-if="!lang.active" class="dropdown-item"> <img :src="lang.img" alt="">{{ lang.name }} </a> </div> </div> </div> </template> <script> export default { props: ['langs'], data() { return { isVisible: false }; }, computed: { activeLang() { let activeLang = []; for (let lang of this.langs) { if (lang.active) { activeLang = lang; } } return activeLang; } }, mounted() { } } </script>

It works like this: The server renders an array of languages ​​with clever calculations, one of which is active, it all comes to the blade template and the vue.js component is already called

The component vue.js in its turn outputs an available list of languages ​​except active, and the active calculates and displays for the user.

When the user clicks on the language wrapper, then vue displays the entire available list.

Now the question is:

How correctly to hide all languages, in that cases, if the user clicked on any of the areas of the site, except the most wrapper languages?

Also interesting is the criticism, perhaps it could have been done differently, in a more beautiful way :)

Thank you.

Hello i have table in Vue template and in table have speed's and time's values. And i want indicate the higher speed and lower time value. And i can have several equal values.

I call method set do something calculation (its just example, sorry for this horror) with array and object bestOf and in template show with conditional directive.

Q:How correctly i can show this best values in tables with Vue API (directives, computed values) or maybe not need use Vue API (i did so)?

Code:

var table = new Vue({ el: '#app-4', template: ` <div v-if="visible" id="sumTable"> <table id="dataTable"> <tbody> <tr v-for="(competitor,index) in competitors"> <td>{{competitor.start}}<span style="color:red" v-if="bestOf.start[index]">&#9733</span></td> <td>{{competitor.speed}}<span style="color:red" v-if="bestOf.speed[index]">&#9733</span></td> </tr> </tbody> </table></div>`, data: { visible: false, competitors: [{ start: '', speed: '', }], bestOf: { start: {}, speed: {}, } }, created: function () { window.addEventListener('keyup', this.tableVisible) }, methods: { tableVisible: function (event) { if (event.keyCode === 88) { this.visible = !this.visible; if (this.visible) { window.calculateRaceStatsTable() } } }, set: function (newArray) { newArray.data.forEach(function(competitor,index,array){ if (!this.bestOf['start'].value || this.bestOf['start'].value > parseFloat(competitor['start'])){ this.bestOf['start'] = {}; Vue.set(this.bestOf['start'],'value',parseFloat(competitor['start'])) Vue.set(this.bestOf['start'],index,true) } else if (this.bestOf['start'].value === parseFloat(competitor['start'])) { Vue.set(this.bestOf['start'],index,true) } if (!this.bestOf['speed'].value || this.bestOf['speed'].value < parseFloat(competitor['speed'])){ this.bestOf['speed'] = {}; Vue.set(this.bestOf['speed'],'value',parseFloat(competitor['speed'])) Vue.set(this.bestOf['speed'],index,true) } else if (this.bestOf['speed'].value === parseFloat(competitor['speed'])) { Vue.set(this.bestOf['speed'],index,true) } }.bind(this)) this.competitors = newArray.data.slice() } } })

I am not able to update the updated data to the child component when doing on-change from a select box with local data/object. But I am able to load data to the child component everytime when I click the submit button with the help of API. I need help to refresh my child component with my updated data when I do the on-change from the select box. Find the below code which I'm trying.

Component-1:

<template> <div> <div class="row"> <select v-model="selectedemp" @change="filterempdata($event.target.value)"> <option value="">Select emp/option> <option v-for="option in empfilterlist" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option> </select> </div> <div class="compone"> <empView v-if='loading' :empDetails='empData'></empView> </div> <div class="col-lg-6 col-md-6"> <button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="getEmpDetails">Fetch Data</button> </div> </div> </template> <script> import updatedemp from './empView' export default { name: 'cluster', components: { 'empView': updatedemp }, data () { return { loading: false, emptData: null, empfilterlist: [ { text: 'Department', value: '1' }, { text: 'Status', value: '2' }, ], selectedemp: '', } }, methods: { filterempdata: function (selectedoption) { console.log(') this.empData.WorkflowFilter = selectedoption this.empData = this.empData }, getEmpDetails: function () { this.$http.get('http://localhost:7070/getemmdata') .then((response) => { this.empData = response.data this.loading = true }, response => { console.log('test' + JSON.stringify(response)) } ) } } } </script>

Component: 2

<template> <div class="empView"> <div class="col-lg-6 col-md-6"> <h3>{{ empid }}</h3> </div> <div class="col-lg-6 col-md-6"> {{ empname }} </div> </div> </template> <script> export default { name: 'empView', props: ['empDetails'], data () { return { empid: this.empDetails.id, empname: this.empDetails.name } }, watch: { workflowDetails: function (changes) { this.empid = changes.id this.empname = changes.name } } } </script>

Hello everyone I'm having a table which has following set:

I'm having years dynamic which needs to be displayed through v-for loop, In general we can have codes like this:

<table class="table table-striped"> <tbody> <tr> <th class="text-center">Brokerage</th> <th class="text-center">Analyst Name</th> <th class="text-center">Report Date</th> <th class="text-center" colspan="2">Target Price</th> <th class="text-center">Change in TP</th> <th class="text-center">Reco</th> <th class="text-center" colspan="3">Sales</th> <th class="text-center" colspan="3">EBITDA</th> <th class="text-center" colspan="3">PAT</th> <th class="text-center">Document Link</th> </tr> <tr> <th class="blue_bg"></th> <th class="blue_bg"></th> <th class="blue_bg"></th> <th class="blue_bg">Old</th> <th class="blue_bg">Revised</th> <th class="blue_bg"></th> <th class="blue_bg"></th> <th class="blue_bg">Year 1</th> <th class="blue_bg">Year 2</th> <th class="blue_bg">Year 3</th> <th class="blue_bg">Year 1</th> <th class="blue_bg">Year 2</th> <th class="blue_bg">Year 3</th> <th class="blue_bg">Year 1</th> <th class="blue_bg">Year 2</th> <th class="blue_bg">Year 3</th> <th class="blue_bg"></th> </tr> </tbody> </table>

Since my years are dynamic I want to have v-for loop for

<th class="blue_bg">Year 1</th> <th class="blue_bg">Year 2</th> <th class="blue_bg">Year 3</th> <th class="blue_bg">Year 1</th> <th class="blue_bg">Year 2</th> <th class="blue_bg">Year 3</th> <th class="blue_bg">Year 1</th> <th class="blue_bg">Year 2</th> <th class="blue_bg">Year 3</th>

Also for displaying data set I'm already having v-for loop, so it will be v-for loop inside v-for loop

<tr v-for="(item, index) in tableFilter"> //dsiplaying data set </tr>

Help me out in this, thanks.

I am working with vuejs draggable sortable, and basicly i have 2 lists, list1 and list2, i want to drag items from list1 to list2.

At the beginning i need to have a div above my list2, or something similiar can be just a paragraph to indicate that the user should drag the elements there. if i try to put the div inside the draggable it affects the behaviour of the same, if i center the paragraph for example and try to drag elements above that paragraph in the div it don't consider it as a draggable zone, any help with this?

this is my draggable list2:

<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-scroll" 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 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>

io.on('connection', socket => { })

This snippet gives you instance 'socket', but I am currently in need of using that instance somewhere else in my project.

Is there a way of accessing it by the port it's running on or similar?

I am trying to change the state in Vuex (Vue.js) with Sockets, which I'd put into a handler in a REST Api.

I am using this vue carousel package, and I am trying to set the icons as navigation buttons, like this:

<carousel :perPage="1" :navigationEnabled="true" :navigationNextLabel="'<i class="material-icons">keyboard_arrow_right</i>'" :navigationPrevLabel="'<i class="material-icons">keyboard_arrow_left</i>'" > <slide v-for="testimonial of testimonials" :key="testimonial.id"> <img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96"> <h4>{{ testimonial.title }}</h4> <p>{{ testimonial.excerpt }}</p> </slide> </carousel>

But, for some reason, it is not working, I get this as the output in the html:

I hava a simple table, every tr is a link with a sepcific order, but I have to have one extra column n th with checking or this order is already in store. ( with checboxes ) I can't to this because when I add this, then all row i a link, but I want to this last column wasn't a link, but simple checboxes. Here is my code:

<table class="table"> <tr> <th>Order Number</th> <th>Name</th> <th>Tel</th> <th>Email</th> <th>Status</th> <th>Order date</th> <th>IS in store?</th> </tr> <router-link :to="'/orderDetail/'+order.id" tag="tr" v-for="order in orders" :key="order.number" class="order-row"> <td>{{order.number}}</td> <td>{{order.client_name}}</td> <td>{{order.phone}}</td> <td>{{order.email}}</td> <td>{{order.actual_status}}</td> <td>{{order.order_date}}</td> <td>Here should be checbox with id of roder, but not as a link</td> </router-link> </table>

I am using this mixin - But it gives me an error in IE11, not in Chrome, FF, Safari, so it seems it's only a IE related issue..

The error im getting is: Error in callback for watcher "inViewport.now": "TypeError: Object doesn't support this action" (WAT?)

The watcher code looks like:

watch: { 'inViewport.now': function(visible) { if(visible) { this.loadDataToSystem(); this.elementIsVisible = true; //Update graph with new data this.resetTimer(); this.updateGraphOptions.minutes = updateIn; this.updateGraphDataTimer = setInterval(function () { this.loadDataToSystem(); }.bind(this), 300000); } else { this.elementIsVisible = false; //Stop updating graph this.stopTimer(); clearInterval(this.updateGraphDataTimer); this.updateGraphOptions.minutes = null; this.updateGraphOptions.started = false; } } },

Do anyone have an idea on what is wrong?

My question is just like this one:Vuejs $emit doesn't fire on callback. But I used the superagent in my project. Here is my code:

//Parent.vue <Child v-on:savevideo="toSaveVideo"/> ... methods:{ toSaveVideo:function(data){ console.log('add'); } } //Child.vue <button @click="toAdd">Add</button> ... methods:{ toAdd:function(){ ... let self = this; superagent .get(url) .query({data:data}) .end(function(err,res){ //trigger parent function let resData = res.body.data; self.$emit('savevideo',resData); }) } }

The request is successful but when trigger 'savevideo', the method 'toSaveVideo' in parent didn't print anything. However, when I put the emit outside the callback, everything is fine. Why does the $emit event not fire in a callback?

Actually I have this code, where I access to assets folder(inside of public).

<div class="itemProjectImage" :id="'itemProjectImage_'+i" :style="'background-image:url(/assets/img/projects/'+project.slug+'/home.jpg'"> </div>

What I really want is access like this to storage, but with vue.

<p class="lead"><img src="{{ asset('/storage/employees/'.$employee->slug.'/'.$employee->slug.'.'.'jpg') }}" width="50%" ></p>

¿Which is the correct way?

Thanks

I want to fade my div when I click one of my A. I can not do it. Can you help me? Here's my code

<div class="item"> <transition name="fade"> <div v-if="show"> <a @click.prevent="Submit(0); show = !show;" href="#"></a> <a @click.prevent="Submit(1); show = !show;" href="#"></a> </div> </transition> </div> data() { return { show: true, }

I am starting to lose my mind in debugging an application that I inherited from a fellow developer who is absent. I have narrowed down the problem to the following place in code (php files are checked, Vue instances are initialised, there are no syntax errors).

This is my the component that gets initialised:

var RadniStol = Vue.component('radnistol', { template: '#template-RadniStol', data() { return { tableData: [], requestData: { sort: "ID", order: "DESC" } } }, methods: { reloadTable: function (event) { data = this.requestData; this.$http.post('php/get/radni_stol.php', data).then(response => { console.log(response.data.bodyText); this.tableData = response.data.records; }); }, . . .

The PHP file that gets called with the POST method is working correctly, querying the database and echoing the response in a JSON format.

The thing that is making me pull out my hair is the following: the console.log(response.data) outputs the following into the console:

{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}

It is an JSON object that I expected to have but when trying to assign it to the data of the component with:

this.tableData = response.data;

or any other way… response.data.records returns ‘undefined’ in the console. I have tryed with JSON.parse() but no success.

When logging types to console: response variable is a response object with a status 200 and body and bodyText containing the data from the database. response.data is a string type containing the string JSON with the data from the database.

I am really starting to lose my mind over this issue, please help!

Thank you