Software

I'm working with an app newly built running on JavaScript (vue.js) , Mongodb, Express.js and node.js . My primary responsibility is to perform testing and take care of front end. Can you please suggest tools and software I can learn to facilitate the job and be more effective at it ? Thanks.

I'm a beginner with Vuejs framework and I'm having a problem in using js libraries in my vue project.. I'll be sooo grateful if anyone could help meee

btw I tried adding this in my main.js file and it didn't work

import template from './assets/js/template.js' Object.definePrototype(Vue.prototype, '$template', { value: template })

template.js is my js file

I have a django project where text is annotated. Once the text is highlighted it should bring up a create button in order to actually create the annotations. The highlighting is done using js rects. This all works fine except when you select the first character of the entire body of text, then the button doesn't show up or is removed. You could highlight the first character or an entire sentence and as long as the first character is selected then the create button is either removed or doesn't show. I'm using vue.js to manipulate the buttons. From the debugging that I have done, it is being done in the vue.js source code but I am having a hard time figuring out whats triggering the node removal. Any ideas as to what could be causing this? Any ideas are greatly appreciated

I am working on my project in laravel/vue.js and I decided to use simple vue-multiselect to choose categories from my database. Thing is I want to clear the value from input field (to look for item in list).

My multiselect component:

<multiselect v-model="value" placeholder="Find the category" label="category_name" :options="categories" @input="addReceiversFromCategory"> </multiselect>

I try to clear an v-model but it work only on first select after page load (and also it is not a smart way..). Last thing i try was the :clear-on-select="true" but it works onlu when multiple is true (which I dont want to be true). I think its simple to do but I didn't find any way in documentation doc

I am quite new to Vue.js. Recently, I have encountered an issue with attaching/detaching keyboard events to window inside one of my components. Here are my methods:

created() { this.initHotkeys(); }, beforeDestroy() { this.discardListeners(); }, methods: { initHotkeys() { window.addEventListener('keyup', this.processHotkey.bind(this)); window.addEventListener('keydown', this.removeDefaultBehavior.bind(this)); }, discardListeners() { window.removeEventListener('keyup', this.processHotkey.bind(this)); window.removeEventListener('keydown', this.removeDefaultBehavior.bind(this)); }, ....

The events attach and fire up without any issues. However, when I switch components, the events still remain attached to the window. After a bunch of attempts, I found out that if I remove the .bind(this) part from all the callbacks, events detach successfully.

Can anyone, please, explain me why this happens?

Thank you in advance!

I have a problem, I used a get and post function to retrieve and save some url in my database, but now I d like to update a variable count, that should rapresent the votes that every video get, and after that I shoul be able to disable the button that a user click to vote. So I'm having some troubles to make the update function, or I should use another post? But if so I probably create another element inside my DB or not?

so here there is my video and for now I set the video's id invisible using css, to test it and try to find the video with that specific id and make the update

<p class="invisible" id="idVideo"> {{item._id}} </p> <iframe class="partecipant" v-bind:src="item.video.url"> </iframe> <p id="voti" > {{item.voti.count}} </p> <input type="button" id="buttonVoti" v-on:click="addVoto">

so here, when the user click the button with id= buttonVoti the v-on click call addVoto function

methods: { ... //ALL THE OTHERS METHODS ... ... ... //AND THEN THE ADDVOTO FUNCTION addVoto : function () { var self = this; //self.videos[1].voti.count++ //console.log(self.videos._id); var i = document.getElementById("idVideo"); var idVid =i.innerHTML; console.log(idVid);

so here I can change the variable count, using self....count++ but I have to store and then retrieve again the same video with the new count updated.

here there is my model so the logic to access to the count should be this one

var mongoose = require('mongoose'); var Schema = mongoose.Schema; var videoSchema = new Schema({ video : { id : String, url : String, idchallenge : String }, voti : { count : {} } }); module.exports = mongoose.model('Video', videoSchema);

I've got node/npm/vue.js-cli installed with default website.

I have these two extensions installed:

When I save, it checks ESlint rules and shows me errors:

The problem is, when I press CTRL-SHIFT-F to format the code, it applies other rules, e.g. format code takes the space out from between the function name and the parentheses, but then ESLint complains that it is not there.

1. How do I know what tool/extension is formatting my code?
2. How do I know what tool/extension is checking rules when I save?
3. How can I set these so that they are the same so that reformatting my code changes the code to rules that it checks when it saves?

I installed node.js on a Windows machine.

Then I installed npm i -g vue-cli.

npm run dev brought up the vue.js-cli site at http://localhost:8080.

After turning off and on my computer, when I type npm run dev, I get this error:

But when I installed vuejs-cli, I explicitly stated I didn't want eslint when it offered to install it.

And there are no eslint errors in my settings:

And in my browser I see this:

Otherwise, I haven't changed the files, and it worked right after I had installed it once.

How can I get these eslint errors to not occur and the site to display corrected?

I installed node.js on a Windows machine.

Then I installed npm i -g vue-cli.

npm run dev brought up the vue.js-cli site at http://localhost:8080.

After turning off and on my computer, when I type npm run dev, I get this error:

What do I need to do to get node able to server the vue.js-cli site again?

This is code from bulma.io and I try using it in template of the component file(.vue)

<div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Text input"> </div> </div>

But content label tag (word "Name") doesn't appear in browser. If I delete class='label' then it does. Why it happens?

I'm not sure how this hasn't been dealt with before, but how do I go about using VueJs and authorizing actions in Vue template?

If I'm using Laravel's blade, this is easy (using @can directive), but there's no documentation or any way to perform this in Vue after searching for hours on Google.

Now, I know I can simply load the users permissions into an array / JSON object inside the view, but there seems to be no way of displaying / hiding actions in Vue templates using Laravel's gate methods to determine if the user is allowed to perform the action on a specific record.

For example, there's a list of comments, but the user must own the comment to be able to see the 'edit' button.

The thing is, if I implement the logic in Vue, I'd be duplicating authorization logic throughout my entire backend and frontend for this.

Using Laravel's policy's, I'm able to perform complex authorization of specific actions. But I'm stumped as to how I would implement the policy in Vue.

There's also more complex scenarios, such as if a user that has an admin role is browsing comments, they should be able to edit it even if they don't own the comment.

Does anyone have any suggestions for this type of scenario?

I'm using currently Laravel 5.4 Broadcasting. I'm getting the response from Pusher in a object with console.log, but when I output it with Vue 2 to my array it doesn't show up.

Vue.component('chat', { props: ['user', 'currentTeam'], data() { return { messages: [], form: new SparkForm({ message: '' }) } }, created(){ this.getMessages(); this.listenMessages(); }, methods: { getMessages() { axios.get('/api/teams/' + this.currentTeam.id + '/messages') .then(response => { this.messages = response.data; }); }, create() { Spark.post('/api/teams/' + this.currentTeam.id + '/messages', this.form) .then(message => { this.form.message = ''; this.messages.push(message); }); }, listenMessages() { Echo.channel('teams.'+ this.currentTeam.id + '.chats') .listen('MessageCreated',(chat)=>{ this.messages.push(chat.chat.message); }); } } });

I have a VueJS app. Whenever I run npm run build it creates a new set of dist/* files, however, when I load them on the server (after deleting the old build), and open the page in browser, it loads the old build (from cache i assume). When I refresh the page, it loads the new code no problem.

This is my index.html:

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="stylesheet" href="/static/css/bootstrap.min.css"/> </head> <body> <div id="app"></div> </body> </html>

Is there a way to force it to load new code every time or (ideally) to check if the old files are gone from the server, then refresh the browser?

In my vue.js project, i get an array data by axios, and want to assign to bookList variable, but failed, bookList still equal to [], could you tell me why?

export default { ... data () { return { bookList: [] } }, mounted: function() { this.$nextTick(function(){ this.viewBooks(); }); }, methods: { viewBooks: function() { axios.get('/books.json') .then(res=>{ this.bookList = res.data.bookList; }) .catch(error=>{ console.log(error); }); } }

I get my data via AJAX from the Vue instance, and I need to pass that data to the components. I am now learning how Vue.js works, but I find the documentation a little fragmentary...

Here is aproximately my code:

<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>mysite</title> </head> <body> <div id="app"> <parent-component></parent-component> </div> <template id="parent-component-template"> <div id="the-template"> <div class="the-list"> <span is="sector-item" v-for="item in sectors" :sector="item"></span> </div> <button>Button</button> </div> </template> <template id="sector-item-template"> <span> {{ sector.name }} </span> </template> <!-- Vue.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <script> Vue.component('parent-component', { template: '#parent-component-template' }); Vue.component('sector-item', { props: ['sector'], template: '#sector-item-template' }); let app = new Vue({ el: '#app', data: { sectors: [{ 'id': 1, 'name': 'Industry' }] } }); </script> </body> </html>

I get the following error:

[Vue warn]: Property or method "sectors" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Where do I make a mistake?

1.I am a beginner of vue.js, but when I was trying some examples, I found something uncommon. The first one is when I set id in the body, and write my js code as followed:

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./css/semantic.css"> <script type="text/javascript" src="js/vue.js"> </script> <title></title> </head> <body style="background-color:black;" id="app"> <div class="ui container" style="margin:20px;"> <div class="ui segment"> <h1>{{ title }}</h1> <p> {{ message }} </p> </div> </div> <script> var app = new Vue({ el: "#app", data: { message: "Hello, world!", title: "How about you?" } }) </script> </body> </html>

And this is my result which does not show me data :

2.And the second problem is when I created an object in the data, and I refer it as followed, it also does not work in the div label. This is the code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./css/semantic.css"> <script type="text/javascript" src="js/vue.js"> </script> <title></title> </head> <body style="background-color:black;"> <div class="ui container" style="margin:20px;"> <div class="ui segment" id="app"> <h1>{{ article.title }}</h1> <p> {{ article.message }} </p> </div> </div> <script> var app = new Vue({ el: "#app", data: { article{ message: "Hello, world!", title: "How about you?" } } }) </script> </body> </html>

So I wonder if there some conflicts when I was using semanticUI and vue.js?

I have used the following code to load image in my App which is based on Vue.js and Onsen UI . But they are not showing.

<div class="footer_logo"> <ul> <li class=""><img :src="logo" alt="logo" /></li> </ul> </div>

I have imported the image using the following code in script

import foot1 from 'static/assets/img/footerlogos/1.svg'; export default { data() { logo: foot1; },

i am using vuejs to drag/drop elements, and basicly i am using the evt.to and evt.from to know if i am dragging the element to the list2 for example, this evt.to/from returns me the html tree from my draggable element that has the list, so the parent has the id="list2" if i drag it to there, i need to know how i can track if my evt.to has the list2 element with plain javascript or maybe vueJS

tried this:

if(evt.to.getElementById("list2")){ console.log("IT HAS"); }

i don't want to check on all document, just on that evt.to, how can i do that without Jquery ?

I have the following code to check if an input field has the required attribute set on it.

computed: { isRequired: function (input) { input = document.getElementsByTagName('input'); for (var i = 0; i < input.length; i++) { return this.input.hasAttribute('required') ? 'test-class' : ''; } } }

And the html template with code for the input component.

<div :class="isRequired" class="o-pf-required pull-left">*</div> <div class="col-md-6 col-lg-6" style="padding-right: 0px"> <!-- padding-right: 0px here cancels out padding on the bootstrap col-lg-12 wrapper keeping the 15px padding of the outer div consistant. --> <input :type="type" class="o-pf-input" :class="isCheckBox" :placeholder="placeholder" :name="placeholder" :required="isRequired ? true : false" :value = 'value' @input="value = $event.target.value"> <label :for="placeholder"> {{ placeholder }} </label> </div>

What I want to achieve is to apply the test-class to the element where the o-pf-required class is to hide the asterisk but the browser gives me the following error:

A related issue on this: VueJS conditionally add an attribute for an element

I try to make a button that restores previous data from textarea how do I do that in laravel and vuejs.I submit the data with vuejs axios then return it modify, I try to make a button that restores previous data in textarea.

<div id="root"> <textarea v-model="areamodel" name="textarea" class="form-control" rows="10" id="textarea" ></textarea> </div> <button v-on:click="vanila" class="btn btn-md btn-info "><span class="glyphicon glyphicon-transfer"></span> Restore </button> public function vue(Request $request) { $vanila = $request->get('areamodel'); return response()->json([ 'vanila' =>$vanila ]); } $ses = session('areamodel'); new Vue({ data:{ areamodel:'', }, methods:{ vanila:function(){ this.vanila = data.areamodel; } } })