Software

I'm very new with VueJS. I have to build a single page application inside a ASP.NET MVC5.

I follow this tutorial and works very well -> TUTORIAL

But when i create a .vue page to test VueJS2 Routes, the browser does not understand "Import", i read that i have to use a transpiler like Babel, someone know how i solve it?

App.VUE

<template> <div id="app"> {{msg}} </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>

App.JS

import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', router, render: h => h(App), data: { message: 'Hello Vue! in About Page' } });

_Layout.cshtml

<div class="container-fluid"> @RenderBody() <div id="app"> { { message } } </div> </div> <script src="~/Scripts/essential/jquery-3.1.1.min.js"></script> <script src="~/Scripts/essential/bootstrap.min.js"></script> <script src="~/Scripts/essential/inspinia.js"></script> <script src="~/Scripts/essential/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script> <script src="~/Scripts/app.js"></script> <script src="~/Scripts/plugin/metisMenu/jquery.metisMenu.js"></script> <script src="~/Scripts/plugin/pace/pace.min.js"></script> <script src="~/Scripts/plugin/slimscroll/jquery.slimscroll.min.js"></script>

Thanks a lot!!

I have a vue.js component that has an array of elements on his data and it's html it's something like this:

<component2> <div v-for="element in Email.elements" :id="element.id"> <component3 :element="element" > </div> </component2>

I can manage component 1 and 3. Component 2 is external code that I can't see or manipulate. When I delete 1 element everything breaks, but when I load component 2 with a new array of elements it works fine. Is there any way to force a reload of a component HTML?

<template> <div> <transition name="fade" mode="out-in"> <div class="ui active inline loader" v-if="loading" key="loading"></div> <div v-else key="loaded"> <span class="foo" ref="foo">the content I'm after is here</span> </div> </transition> </div> </template> <script> export default { data() { return { loaded: false } }, mounted() { setTimeout(() => { // simulate async operation this.loaded = true console.log($(this.$refs.foo).length, $(this.$el.find('.foo')).length) }, 2000) }, } </script>

Regardless if I use this.$refs or this.$el, I'm only able to access the loader div (<div class="ui active inline loader"/>).

How am I supposed to access an element which doesn't exist when the component is mounted? Do I have to change v-if to v-show?

I have an array of objects like this:

buttons: [ { name: 'ok', action: this.onOk, disabled: this.disabledButton }, { name: 'reset', action: this.onReset } ]

This array is sent to a child component as a prop.

Now, the disabledButton parent variable will change on different ocasions... Is there a way to also make my button disabled property change (without watchers and recreating the array) ??

Thank you

I am using a dropdown menu components in vuejs to make normal dropdown menu. My code is for dropdown component is :

<template> <span class="dropdown" :class="{shown: state}"> <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a> <div class="dropdown-menu" v-show="state"> <ul class="list-unstyled"> <slot></slot> </ul> </div> </transition> </span> </template> <script> export default { name: 'dropdown', data () { return { state: false } }, methods: { toggleDropdown (e) { this.state = !this.state; } } } </script>

Now I am importing the dropdown component in my VUE app at various place by using following code in the template

<dropdown> <li> Action </li> </dropdown>

Now that is working fine but I want that only one dropdown should be active at the same time.

I have done little research and found that i can use plugins like https://github.com/davidnotplay/vue-my-dropdown but I don't want to use that. Again i have also studied how the above example works but I want to implement this dropdown functionality in such a way that my dropdown component would take care of all event related to dropdown. So can you help me how to achieve that?

I have api on laravel and front on vue + laravel. I am getting all the data from api and pass it to view. Now I want to do conditional rendering.

My array looks like:

"data" => array:2 [▼ 0 => array:5 [▶] 1 => array:5 [▶]

I want to show div if topic from link is the same topic from array. But I do not know how to search and compare that words. So it will be like that:

v-if="$topic == this.topic"

But now I can only use

v-if="$data[]['0']['topic']"

and then I have the same topic on all my views.

My link looks like:

/user/{topic}/post

How to do it correctly guys?

So i have two script files that I am trying to include. one is a javascript file and the other a vue file.

the javascript file gets included but for some reason the vue file does not get included. I do not get any errors.

three structure:

hbs page:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> --> <link rel="stylesheet" type="text/css" href="/Static/css/spaceGame.css"> <!-- <link rel="stylesheet" href="css/normalize.css"> --> <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet"> <title>{{title}}</title> </head> <body> {{{body}}} <!-- Footer --> <script src="https://unpkg.com/vue"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="/Static/script/space.js"></script> <script type="text/javascript" src="/Static/script/someTest.js"></script> </body> </html>

script:

var express = require('express'); var hbs = require('express-handlebars'); var app = express(); var orgininPath = require("path"); var routes = require(orgininPath.resolve('./hoast/routerHandler/routes')); app.listen(3000, function() { console.log('Listening on port 3000'); }); app.use(express.static(orgininPath.join(orgininPath.resolve('./'), 'public'))); var url = require('url'); app.engine('hbs', hbs({ extname: 'hbs', defaultLayout: 'layout', layoutsDir: orgininPath.resolve('./Views/Layout/') })); app.set('view engine', 'hbs'); app.use('/', routes); module.exports = app;

Browser includes js file but now vue file:

What am I missing?

We are using Testcafe + Webpack + Vue.js for our project. I know that it is possible to debug the test code either by t.debug() directive or --inspect flag of node.js.

However, I can only see the production code (bundle.js) which is obfuscated and not really debuggable. I wonder if it is possible to have a configuration so that the testcafe does not use the bundled code but rather the original source code (probably with sourcemaps?). I am using source-map as the devtool option in webpack.

I am aware that the UI tests should test the production code but it would be nice to have such a configuration while developing. Any ideas?

I need to get the current position of a Vue component in the DOM. I know that I can get the HTMLElement of a component by using:

this.$el

This is not a node though. I need to be able to perform an appendChild on the current component so therefore I need a node.

Is there a proper way to do this?

I have this code that posts some data to a remote server and receives the success message. I am getting an array and i am using that array to contain various pieces of data. I want to use a particular data to show if the direction of a trad is up or is down using vue js.

This is the jquery code

var email = window.localStorage.getItem("email"); var rid = window.localStorage.getItem("rid"); var ob = { 'email' : email, 'id' : rid }; var data = decodeURIComponent($.param(ob)); setInterval(function() { $.ajax({ url: 'http://example.world/mobile/index.php/welcome/my_trade_details', type: 'POST', data: data, success: function (data) { data = JSON.parse(data); $('#started_at').html(data.trade_start); $('#ended_at').html(data.trade_end); $('#my_trade_is').html(data.trade_direction); $('#result_is').html(data.trade_result); $('#trade_status').html(data.trade_status); $('#concurrency').html(data.trade_concurrency); $('#amount').html(data.trade_amount); $('#etherum_contract_number').html(data.etherum_contract_number); }, error: function (data, textStatus, jqXHR) { if(typeof data === 'object'){ var data = 'No Internet Connection Detected'; } } }); }, 5 * 1000);

and this is the vue js code

<div v-if="trade_direction === 'up'"> <i class="green material-icons">arrow_upward</i> </div> <div v-else> <i class="green material-icons">arrow_downward</i> </div>

How can i define and pass the variable trade_direction between jquery and vue js?.

I have articles array, through which I loop and create media objects for each of them. This is the parent component:

<div v-for="article of mostReadNews" class="most-read"> <media-object :article="article"></media-object> </div>

And this is the template of the media-object component:

<template> <router-link :to="article.link"> <article class="media"> <figure class="media-left"> <p class="image is-96x96"> <img :src="article.image.data.path"> </p> </figure> <div class="media-content"> <div class="content"> <h6 class="is-6">{{ article.title }}</h6> <span class="time-icon"><i class="material-icons">query_builder</i> {{ createdAt }}</span> </div> </div> </article> </router-link> </template>

The problem I have is that if I set with :last-child styling, like in my case, where I am setting the border-bottom for each element, except for the last one, it overwrites the first rule and none of the elements get border. I have tried with setting the css both in parent and child component, as well as in the theme.scss, but every time the border bottom of the last child selector overwrites the border bottom that I have set up for other items. This is the css:

<style scoped lang="scss"> @import "../assets/theme"; article { border-bottom: 1px solid $grey-lighter; } article:last-child { border-bottom:none; }

How can I fix that?

I use Vue.js 2.3, I want to define my own class for active href.

I saw 'linkActiveClass' option in the doc, but I can't figure out how to use it. I tried directly in code :

<router-link :to="{path : 'about', linkActiveClass: 'active', exact: true}" class="item" :linkActiveClass="active"><i class="icon talk"></i> About</router-link>

It doesn't work. I think I can define it in RouteConfig, but how to do that ? I see nothing in doc.

I used two methods to call Baidu map

first

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=token"></script>

An external resource is set in webpack.base.conf.js

externals: { "BMap": "BMap"}

but

Uncaught ReferenceError: BMap is not defined

second

new baiduMap.js

export function MP(ak) { return new Promise(function (resolve, reject) { window.onload = function () { resolve(BMap) } var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak; script.onerror = reject; document.head.appendChild(script); }) }

import {MP} from './baiduMap.js'

mounted(){ this.$nextTick(function(){ var _this = this; MP(_this.ak).then(BMap => { }}

The second method can be loaded Baidu map，but on the second page，map not loaded again。

How can i do?

I have a problem to force a restart on new route

I have an route

/editor but also /editor?_id=dasd448846acsca

/editor is simple component with form with empty inputs /editor?_id=dasd448846acsca this component is the same as /editor but just with filled inputs from DB I want to be able to open /editor component (using some function, link) with empty inputs from component /editor?_id=dasd448846acsca

I used this.$router.push('editor'); this.$forceUpdate(); in function and route is changed, but data in restarted (inputs are not empty)

Why do we need Vuex, Flux, Redux and The Elm Architecture when we can achieve the same result with websocket? What I need to do to make sure each component sharing the same data.

For instance (Nuxt.js + Socket.io):

<template> <div> // Component 1 <span> <ul id="messages"> <li v-for="message in messages">{{message}}</li> </ul> </span> // Component 2 <span> <ul id="messages"> <li v-for="message in messages">{{message}}</li> </ul> </span> <!-- the submit event will no longer reload the page --> <form v-on:submit.prevent="submitMessage"> <input id="m" autocomplete="off" v-model="inputMessage"/> <button type="submit">Send</button> </form> </div> </template> <script> import axios from '~/plugins/axios' import socket from '~/plugins/socket.io' socket.on('news', function (data) { console.log('server message received: ' + data) socket.emit('my other event', { my: 'data' }) }) export default { layout: 'dark', // you can set a custom layout here. async asyncData () { let data = await axios.get('/api/tasks') console.log(data.data) return { inputMessage: '', messages: ['hello'] } }, head () { return { title: 'Users' } }, created () { socket.on('chat.message', function(data) { this.messages.push(data) }.bind(this)) }, methods: { submitMessage() { socket.emit('chat.message', this.inputMessage) this.inputMessage = '' } } } </script>

This seems a lot easier, simpler and interesting as it is a real-time update.

Any thoughts?

i am trying to edit a component, when i open the component i load his data with mounted like this:

mounted () { var sectionKey = this.$store.getters.getCurrentEditionKey this.table = _.clone(this.$store.getters.getDocumentAttributes[sectionKey]) this.table.tableGrid = _.clone(this.$store.getters.getDocumentAttributes[sectionKey].tableGrid) this.entered = true },

as you guys can see i change the this.entered, i tried to track when the elements are loaded so i can start tracking with the watcher the changes on my component.

watch: { 'table.rows': function (val, oldValue) { if (this.entered === true) { if (val > oldValue) { this.table.tableGrid.push(['']) } else if (val < oldValue) { this.table.tableGrid.splice(this.table.tableGrid.length - 1, 1) } } }, 'table.cols': function (val, oldValue) { if (this.entered === true) { if (val > oldValue) { for (var i = 0; i < this.table.rows; i++) { this.table.tableGrid[i].push('') } } else if (val < oldValue) { for (var j = 0; j < this.table.rows; j++) { this.table.tableGrid[j].splice(this.table.tableGrid[j].length - 1, 1) } } } }

i am tracking my table cols and table row, it is a number input that i change if i want, the problem is that it enters the watcher before the mounted, i don't know how can i handle this situation any help?

My code like this :

updated() { console.log('test') },

Demo and full code like this : https://jsfiddle.net/50wL7mdz/58492/

I check on console, the result of console.log('test') not display

If I use mounted, it works

Why if I use updated, it does not work?

How can I solve the problem?

I have a component which uses 'data1' props.

<template> <div> <component1 :data='data1'><component1> </div> <template>

This data1 is a computed property which needs another computed data for calculating one of its values:

computed: { componentInfo: function() { return this.$store.state.componentData; } data1: function() { return {value1: this.componentInfo.value1, ... other values} } }

My problem is that the component tries to evaluate data1 value before getting the componentInfo from the store (which causes an error since this.componentInfo is still undefined)

How should such a scenario be treated?

How to correctly way use v-if when I using v-for inside?

Actually I want to add a condition when the index is 0 or first data is displayed I want to add active class

<div class="item active" v-for="(item, key, index) in slideItem" :key="item._id"> <img alt="900x500" src="http://lorempixel.com/960/720/"> <div class="carousel-caption"> <h3>{{ item.title }}</h3> <p>{{ item.body }}</p> </div> </div>

and show this when the next data :

<div class="item" v-for="(item, key, index) in slideItem" :key="item._id"> <img alt="900x500" src="http://lorempixel.com/960/720/"> <div class="carousel-caption"> <h3>{{ item.title }}</h3> <p>{{ item.body }}</p> </div> </div>

You can see the two examples I gave, how I combine the two loops into one by distinguishing the first index (item active) condition and so on using v-if

How to put content under certain headings? I have two methods to load data

first axios.get('/api/get/headers')

second axios.get('api/get/contents')

I have no idea how correctly this will be done, given that the headers can be different and the content is correspondingly too