Software

I want to drag a element from list 1 to list 2 and call a method when i leave the drag, i almost accomplish everything with it, my only problem here is that i only can put the @end(responsable for detecting the end of dragging) in the draggable tag, and the div that has the v-for is a child from it, so i can't get the element from the list to pas to a function in my draggable.

This is my code:

<draggable v-model="sectionList" class="dragArea" @end="changeView(section.component)" :options="{group:{ name:'sections', pull:'clone', put:false }}"> <transition-group name="list-complete"> <div v-for="(section, index) in sectionList" @click="changeView(section.component)" :key="section.text" class="card card-color list-complete-item"> <div class="card-block"> <h4 class="card-title text-center">{{section.text}}</h4> </div> </div> </transition-group> </draggable>

the @end=changeView receives a parameter, that parameter should be the section.component that comes from the list, any help to get the element?

Thank you

Im trying to create a computed function that can filter out my Object by "alarms",

So I've created a computed function, called filteredAlarms, and in my loop im doing a v-for loop:

<li class="event-log__item timeline__item" v-for="(item, key) in filteredAlarms" :key="key">

And in my filter im trying to do the following:

let filteredAlarms = Object.keys(this.eventLog).forEach(key => { this.eventLog[key].filter(item => { return item.type.indexOf("alarm") > -1 }); }); return filteredAlarms

Unfortunately, this doesn't work - Im getting a an error: TypeError: this.eventLog.filter is not a function

What am I doing wrong? :)

The object im trying to filter is something similar to the one below:

"system_events": { "1013": [{ "id": 25899, "timestamp": "2017-08-15T21:26:42Z", "type": "alarm", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:26:40Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Randers pr 44b sidste station" }, { "id": 26157, "timestamp": "2017-08-15T21:32:17Z", "type": "warning", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:32:06Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Randers pr 44b sidste station" }, { "id": 26387, "timestamp": "2017-08-15T21:37:38Z", "type": "info", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:37:33Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Randers pr 44b sidste station" } ], "1015": [{ "id": 23777, "timestamp": "2017-08-15T20:38:08Z", "type": "alarm", "code": 191, "title": "", "description": "", "appeared": "2017-08-15T20:38:00Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" }, { "id": 23779, "timestamp": "2017-08-15T20:38:08Z", "type": "alarm", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T20:37:58Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" }, { "id": 23841, "timestamp": "2017-08-15T20:39:41Z", "type": "alarm", "code": 192, "title": "", "description": "", "appeared": "2017-08-15T20:39:31Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" }, { "id": 25243, "timestamp": "2017-08-15T21:12:03Z", "type": "alarm", "code": 191, "title": "", "description": "", "appeared": "2017-08-15T21:11:55Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" }, { "id": 25529, "timestamp": "2017-08-15T21:18:11Z", "type": "alarm", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:18:00Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" } ],

} ]

}

I am trying to use vuejs and highchart on displaying the data. When I change the model, I want to redraw the chart data. Any idea ? This is what I tried to do?

var options = { title: { text: 'Temperature ', x: -20 //center }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] }, yAxis: { title: { text: 'Temp' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: 'Japan', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'Australia', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] };

For the Vue

return new Vue({ el: '#app', data: { modelValue = '', options:options }, methods: { changetemp = function(){ //The option value should be change here } },

When the model value is changed, I want the options to be redrawn

I want to show my vue js list in v-for reversed on dom. Object should not be change. Just created reversed list by v-for. HTML default list is top to bottom, I want to append items from bottom to top in dom. You can see telegram web messages list that do this with ng-repeat.

Is there any way to do this by v-for? or another option?

Thanks.

var app = new Vue({ el: '#app', data: { positions: [] }, created() { axios.get('/config').then(function(response) { this.$set(this.positions, "positions", response.data[0].dragedPositions); }); console.log(this.positions.positions); } });

I have configs for my app in database and I want to use them inside of Vue instance (here are positions of my elements). But when im getting "this.positions.positions" Im getting empty string.. How can I do that?

I'm using Jest for unit test in a vuejs2 project but got stuck in mocking howler.js, a library imported in my component.

Suppose I have a component named Player.vue

<template> <div class="player"> <button class="player-button" @click="play">Player</button> </div> </template> <script> import { Howl } from 'howler'; export default { name: 'audioplayer', methods: { play() { console.log('player button clicked'); new Howl({ src: [ 'whatever.wav' ], }).play(); } } } </script>

then I have its test file named Player.spec.js. Test code was written based on the answer here, but the test failed since called wasn't set as true. It seems that mocked constructor won't be called when running this test.

import Player from './Player'; import Vue from 'vue'; describe('Player', () => { let called = false; jest.mock('howler', () => ({ Howl({ src }) { this.play = () => { called = true; console.log(`playing ${src[0]} now`); }; }, })); test('should work', () => { const Constructor = Vue.extend(Player); const vm = new Constructor().$mount(); vm.$el.querySelector('.player-button').click(); expect(called).toBeTruthy(); // => will fail }) })

Though I'm using Vuejs here, I considered it as a more general question related to the usage of Jest's mock API, but I'm not able to get further.

I am building an app with various pages, and when users goes to /orgs I have a template that I require

// routes.js ... import Orgs from './components/Orgs.vue'; ... { path: '/orgs', component: Orgs, meta: { requiresAuth: true } },

from here I have a simple template in Orgs.vue that looks like:

<template lang="html"> <div> {{orgs}} </div> </template> <script> export default { data(){ return { orgs: []; } }, created() { //use axios to fetch orgs this.orgs = response.data.orgs; } } </script>

The problem is that if I want to show list of organizations in other pages, I am bound to duplicate the same code for other pages as well, but I am trying to find a solution that would call return organizations so I can use that in multiple page?

What is the solution for this?

I am trying to implement a vote button with vue js, when user click "Vote" will send axios request to server and store the data, then return json back. Same with unvote. I also check if the user is voted, the button should change to Unvote like facebook. So far the vote and unvote button is work correctly. But i found a problems which is the voted features is not working. If user voted, after refresh page it will change back to "Vote", but it should be Unvote. But if the button was clicked, in database will showing the vote was deleted. Mean it should be problems of computed. But i am struggle on it since i not really know vue js.

This is my vue components.

<template> <a href="#" v-if="isLiked" @click.prevent="unlike(comment)"> <span>UnVote</span> </a> <a href="#" v-else @click.prevent="like(comment)"> <span>Vote</span> </a>

<script> export default{ props: ['comment','liked'], data: function() { return { isLiked: '', } }, mounted() { axios.get('/comment/'+ this.comment.id +'/check', {}) .then((response) => { this.liked = response.data;//here will get json "true" or "false" }); this.isLiked = this.liked ? true : false; }, computed: { isLike() { return this.liked; }, }, methods: { like(comment) { axios.post('/comment/'+ comment.id +'/like') .then(response => this.isLiked = true) .catch(response => console.log(response.data)); }, unlike(comment) { axios.post('/comment/'+ comment.id +'/unlike') .then(response => this.isLiked = false) .catch(response => console.log(response.data)); }, } }

I have a project with a simple folder structure similar to the following:

pages/ --items.vue --items/ ----_id.vue

I have included a <nuxt-child/> inside items.vue along with a list of items that link to different id's. _id.vue simply renders a modal that displays info based on the id passed as a param.

This is all working and rendering properly except that each time an item is clicked, the items.vue component re-renders causing it reset its state and lose the users scroll position.

Is this expected behavior? Is it possible to have dynamic nested routes without re-rendering their parent with each route change?

I am new to web development scene and recently started to dive into it, still getting a hang on how stuff are wired up in the background process by webpack.

I am trying to get wow.js which I installed by npm to work in all my Vue components. So I was wondering how do I include wow.js globally, such that all my future Vue component will be able to use wow?

I included the following in my index.html, but it didn't work.

<script src="node_modules/wowjs/dist/wow.min.js"></script><script>new WOW().init();</script>>

But when I do the following, which fetches it from a CDN, it works.

<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script><script>new WOW().init();</script>>

Although it works if I use the CDN method, but I want to find out the proper way to include npm installed dependencies

After a successful ajax call the data rendered on the page is not updating. It is remaining empty / null.

It seems that I am missing how to connect the data returned as a front end variable and the dynamically / live rendered html elements.

Here is the relevant code snippets for context. Is it clear from this what is missing / incorrect?

Javascript

page = new Vue({ el: "#container", data: { option_id: null, option_name: null }, created:function() { $.ajax({ type: 'POST', contentType: 'application/json', dataType: 'json', url: 'ajax_methods/get_option', success: function (ajax_data) { self = this; self.option_id = ajax_data.option_id; self.option_name = ajax_data.option_name; }, error: function (e) { console.log(e) } }) } })

HTML

<script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script> <div id="container"> <p>{{ option_name }}</p> <button v-on:click="send_option()" type="button" id="left_button" name="left_button" v-bind:value="option_id"> </div>

Checking AJAX success

When entering the following in the console, non null values come back as expected:

• self.option_id
• self.option_name

My problem is with this json. http://dev-rexolution.pantheonsite.io/api/noticias

I need to consume with vuejs 2 only the first element of the array to be able to display it, working with the console I worked but with no vuejs.

This console log work: console.log(response.data[0].title[0].value);

<template> <div class="Box Box--destacado1"> <div class="Media Media--rev"> <div class="Media-image"> </div> <div class="Media-body"> <span class="Box-info">{{ noticias[0].field_fecha[0].value}}</span> <h3 class="Box-title"> <a href="">{{ /*noticias[0].title[0].value */}}</a> </h3> <p class="Box-text">{{/*noticias[0].field_resumen[0].value*/}}</p> </div> </div> </template> <script> import axios from 'axios'; export default { data: () => ({ noticias: [], errors: [] }), // Fetches posts when the component is created. created() { axios.get(`http://dev-rexolution.pantheonsite.io/api/noticias`) .then(response => { // JSON responses are automatically parsed. this.noticias = response.data }) .catch(e => { this.errors.push(e) }) } } </script>

I'm trying to determine how to pass an event down with a bound change listener to a child input component. I'm using wrapped input components, but want to be able to define methods in the parent component.

//App.js: <currency-input :input="changeInput" :value="inputs.name"></currency-input> <input :input="changeInput" :value="inputs.address"></input> <script> export default: { changeInput(e) { this.$store.dispatch('changeInput', e); } } <script> //currency-input <masked-input type="currency" class="currency-input" :mask="currencyMask"> </masked-input> //store.js vuex action changeProp: function( state, e ){ state.dispatch('change_prop', e.target.name, e.target.value); }

This fires on the 'input', but not on the 'currency-input'. If I add @input prop to the currency-input and bind it to the masked-input's @input, then the function runs but the value of 'e' is just the input value, not the event.

Why is this happening and how can I pass the function so that the parameter ends up being the event itself?

I have this vue.js component that uses axios to retrive a json array of joke objects :

<script> import axios from 'axios'; export default { name: 'showJokes', data () { return { jokes:[] } }, methods: { }, created() { axios.get('http://127.0.0.1:8090/api/jokes).then(function(data){ //console.log(data); works fine this.jokes = data.body; }); } } </script>

When I log the result in console it's fine but when I try to put it in jokes array I get

Uncaught (in promise) TypeError: Cannot set property 'jokes' of undefined

This may be a trivial error but as a newbie to vue.js I'm stock on this so appreciate your hints.

I'm working with Vuex and in one of my components I try to pass an iterable element as function parameter in a v-for loop. My problem is that instead of getting the element I want, I get an empty object...

I would also like to know if I'm passing the parameter to the store actions the right way?

Code goes as follow:

//Side_bar.vue <template> <div id="sideBar"> <ul> <li v-for='l in links'> <button v-on:click='d(l.title)'>{{l.title}}</button> </li> </ul> </div> </template> <script> export default { name: 'sideBar', data () { return { links: [ {'title':'asset', 'valuesss':'ASSET'}, {'title':'task', 'valuesss':'TASK'}, {'title':'user', 'valuesss':'USER'} ] } }, computed:{ d(v){ console.log(this.$store.state.activeTable) // update active table this.$store.dispatch('updateActiveTable',v) } } } </script> <style> li { list-style-type: none; padding-bottom: 5px; } </style>

store file looks like this

//store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { activeTable: 'assets' // def view }; const mutations = { setActiveTable(context,v){ context.activeTable = v } }; const getters={ getActiveTable(context){ //return active table return context.activeTable } }; const actions={ updateActiveTable(context,v){ console.log(context) context.commit('setActiveTable',v) } } export default new Vuex.Store({ state, mutations, getters, actions })

App.vue looks like that

<template> <div id="app"> <sideBar></sideBar> <tableComponent></tableComponent> </div> </template> <script> import sideBar from './components/Side_bar' import tableComponent from './components/Table_component' export default { name: 'app', components:{ sideBar, tableComponent } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } small { display: block; font-style: italic; } </style>

I am trying to create a Vue page that contains nested field collections. I.e. Parent form and repeatable child forms.

It works with the exception that when deleting a child form, the template renders incorrectly

Please see the fiddle example that I created - https://jsfiddle.net/c4marcus/1mu2oceb/8/

The sample data contains basic information for The Beatles. If you click the trash can next to "Ringo" then mistakenly "George" will disappear and not "Ringo".

However, when you click submit the correct data is being saved (see screenshot below).

I feel like the problem must lie with the MemberFormset vue component's remove method which is triggered by clicking the trash can button.

remove: function(index) { this.members.splice(index, 1) this.$emit('input', this.members) },

Once spliced, the template should render the array of forms with the new data.

<div class="form-group" v-for="(member, index) in members"> <member-form :model="member" :index="index" @input="update(index, $event)"> <div slot="trash"> <button type="button" class="btn btn-default margin-top-md" @click="remove(index)"> <i class="fa fa-trash"></i> </button> </div> </member-form> <hr v-if="separator(index)" /> </div>

I finished my Vue app and ran npm run build to deploy the app. Everything seems to be fine. However, some of my images will not run. Four of my images render just fine. However, those four images are not in my img folder. On the console, I get this error:

GET file:///C:/static/img/Two.550dff0.jpeg net::ERR_FILE_NOT_FOUND

The image name is "Two.550dff0.jpeg" and it is in the img folder but the app cannot access it. Why is that? Also, for the four images that render, those images are not in the img folder. I also cannot find those four images in the dist folder.

I have a string of text

<p>This is some text <span style="color: rgb(54, 54, 54);"> and here is a bit more</span> and even more. </p>

and this regexp <[^>]*> will grab the following from it.

<p> <span style="color: rgb(54, 54, 54);"></span> </p>

How would I grab the inverse of this instead? I am looking to get the text instead. Been searching all over and have only managed to find people using the above regexp to do a content replace to strip tags.

I'm looking to search the text in my VueJS app.

When I update the the state.level in the state property the computed property that is assigned to observe that update doesn't get triggered. You can see the relevant code below.

The entry point is where I get the data with a get request. Then I pass on the information, which then continues recursively to create a file/folder tree structure.

When I click on a folder I want to toggle the open attribute. Everything works except that the 'get open()' function doesn't pick up the state.level change.

Does anybody have any idea as to why?

// store 22 interface IHash{ 23 [id: number]: OU 24 } 25 26 var store = new Vuex.Store({ 27 state: { 28 map: {} as IHash, 29 root: [], 30 loaded: false, 31 level: [], 32 }, 33 mutations: { 34 addToMap(state, data){ 35 state.map[data.id] = data; 36 }, 37 pushChild(state, data){ 38 state.map[data.parentId].children.push(data.ou); 39 }, 40 addToRoot(state, id){ 41 state.root.push(id); 42 }, 43 open(state, data){ 48 for(let ou of ouList){ 49 if(ou.id === data.id){ 50 ou.open = !ou.open; 51 } else { 52 ou.open = false; 53 } 54 } 55 } 56 }, 57 getters: { 58 map(state){ 59 return state.map; 60 } 61 }, 62 actions: { 63 getChildren({ commit, state }, id){ 64 axios.get('/api/ou', { 65 params: { 66 parentId: id, 67 } 68 }).then( response => { 69 for(let i=0; i<8; i++){ 70 state.level[i] = []; 71 } 72 for(let r of response.data){ 73 let ou: OU = new OU({ 74 id: r.id, 75 name: r.name, 76 parentId: r.parentid, 77 level: r.level, 78 open: false, 79 children: [new OU({})], 80 }) 81 if(ou.id === 1455){ 82 commit('addToRoot', ou.id); 83 } else { 84 let map = state.map; 85 let parentOu: OU = map[ou.parentId]; 86 commit('pushChild', { parentId: parentOu.id, ou: ou }); 87 } 88 commit('addToMap', ou); 89 state.level[r.level].push({id: r.id, open: false}); 90 } 91 state.loaded = true; 92 console.log(state.map) 93 console.log(state.level) 94 }).catch( error => { 95 console.log(error) 96 }) 97 }, 98 }, 99 }); // Entry point of the program 1 <template> 2 <div > 3 <h1>Organisational Unit</h1> 4 <button @click="f">button</button> 5 <ul id="ou-wrap" class="ou-wrapper"> 6 <item v-for="(r, index) in $store.state.root" 7 :key="$store.state.map[r].id" 8 :name="$store.state.map[r].name" 9 :id="$store.state.map[r].id" 10 :level="$store.state.map[r].level" 11 :index="index" 12 :children="$store.state.map[r].children"> 13 </item> 14 </ul> 15 </div> 16 </template> 17 18 <script lang=ts> 19 import Vue from 'vue'; 20 import { Component, Watch, Prop } from 'vue-property-decorator'; 21 import axios from 'axios'; 22 import { OU } from './models/ou'; 23 import debounce from './utils/debounce'; 24 28 @Component 29 export default class ouTree extends Vue { 30 //'item': item 31 32 errorMessage: string = ""; 33 children: OU[] = []; 34 35 beforeMount(){ 36 this.$store.dispatch('getChildren'); 37 } 38 39 f(){ 40 this.$store.state.loaded = !this.$store.state.loaded; 41 } 42 43 } // template for the recursive part 1 <template> 2 <li> 3 <div @click="toggle" :class="{ isParent: hasChildren(), 'ou-active': open }" class="ou">{{ name }}</div> 4 <!-- Change 'v-show' to 'v-if' to perform GET on user click --> 5 <ul v-show="open" class="item"> 6 <item v-for="(child, index) in children" 7 :key="child.id" 8 :name="child.name" 9 :id="child.id" 10 :level="child.level" 11 :index="index" 12 :children="child.children"> 13 </item> 14 </ul> 15 </li> 16 </template> 17 29 @Prop() 30 name: string; 31 32 @Prop() 33 id: number; 34 35 @Prop() 36 level: number; 37 38 @Prop() 39 index: number; 40 41 @Prop() 42 children: [OU]; 56 57 toggle(){ 58 this.$store.commit('open', {id: this.id, level: this.level}); 59 console.log(this.$store.state.level) 60 } 61 62 get open(){ 63 return this.$store.state.level[this.level][this.index].open; 64 } 65 66 hasChildren(){ 67 if(this.children.length != 0){ 68 return true; 69 } 70 return false; 71 }

I'm developing a simple app with Node-RED, VueJS and Waton API. I wrote following code in a flow wired to HHTP OUTPUT. The problems start when i try to visualize the web page. The hint message change, the question message no. Why i can't see the questions? Maybe is a problem of scope?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Find Funds</title> <!-- Include VueJS Framework --> <script src="https://unpkg.com/vue"></script> <!-- Include VueJS Resource --> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script> <!-- Include W3.CSS Framework --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <!-- Include Google Icon --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="w3-cyan"> <div id="app" class="w3-contenitor w3-round w3-white w3-display-middle"> <span clas="w3-row"> <h1 class="w3-margin w3-threequarter">{{getQuestion()}}</h1> </span> <span class="w3-row"> <form> <input type="text" class="w3-margin" v-model="currentAnswer"> <i class="material-icons w3-margin" v-on:click="addAnswer()">send</i> <i class="material-icons w3-margin" v-bind:title="getHint()">help_outline</i> </form> </span> </div> <script id="jsbin-javascript"> var app = new Vue({ el: '#app', data: { count: 0, questions: ["first", "second", "third", "fourth", "fifth"], hints: ["first hint", "second hint", "third hint", "fourth hint", "fifth hint"], answers: [], currentAnswer: "" }, methods: { getQuestion: function(){ return this.questions[this.count]; }, getHint: function(){ return this.hints[this.count]; }, addAnswer: function(){ this.answers.push(this.currentAnswer); this.count++; this.currentAnswer = ""; console.log(getQuestion); console.log(getHint); if(this.count >= this.questions.length){ // some code } } } }) </script> </body> </html>