Software

I am trying add some VueJS to some existing pages that use Razor syntax.

On this specific page, there is a form that uses the @Html.EditorFor helpers.

I am trying to add a Vue model to this, which works by adding the v-model attribute to an element.

To do this, I tried adding it like so:

@Html.EditorFor(model => model.IsVirtualSubAccount, new { htmlAttributes = new { v_model="isVirtualSubAccount" } })

However the v-model is not actually being rendered. The rest of the element comes out fine - in this case it is a checkbox and it appears as normal.

To test this further I added a data-test attribute like so:

@Html.EditorFor(model => model.IsVirtualSubAccount, new { htmlAttributes = new { data_test="renderthis", v_model="isVirtualSubAccount" } })

The data-test="renderthis", comes out fine - but I am still missing the v-model:

<input data-test="renderthis" id="IsVirtualSubAccount" name="IsVirtualSubAccount" type="checkbox" value="true" class="check-box">

Why is the @Html.EditorFor helper not rendering my Vue syntax?

How can I add items to the hasErrors array if the input username or password are empty and remove them if the input are not empty so that the disabled class on the submit button is dynamically enabled/disabled?

<form> <input type="username" v-model="username"> <input type="password" v-model="password"> <input type="submit" :disabled="hasErrors.length > 0"> </form> <script> var app = new Vue({ el: '#app', data: { username = '', password = '', hasErrors: [] } }); </script>

I am currently trying to get this thing working with Vue Router.

The goal is: If Nav#1 is clicked, a Component which includes another Router-Link with SubNav#1 preselected should appear.

I could get it to work in the way that if you click Nav#1, the Component with SubNav#1 with an already active class appeared. The problem is that the active class from Nav#1 is removed and it is not possible to navigate to Nav#2 or N#3. If I click on the Router-Link from Nav#2 or #3 nothing happens...

routes.js:

{ path: '/app', component: App, children: [ { path: 'Nav#1', component: Nav#1_Content, children: [ { path: 'SubNav#1', component: SubNav#1_Content}, { path: 'SubNav#2', component: SubNav#2_Content} ]}, { path: 'Nav#2', component: Nav#2_Content}, { path: 'Nav#3', component: Nav#3_Content}, ]}

+ custom linkActiveClass in new VueRouter instance.

Nav component:

<router-link to="Nav#1/SubNav#1">Nav #1</router-link> <router-link to="Nav#2">Nav #2</router-link> <router-link to="Nav#3">Nav #3</router-link>

Nav#1_Content component:

<template> <div> <nav> <router-link to="SubNav#1" tag="div">SubNav#1</router-link> <router-link to="SubNav#2" tag="div">SubNav#2</router-link> </nav> <router-view></router-view> </div> </template>

im trying to console.log the response but it gives me an error, i dont know why here is my Script

new Vue({ el: '#app', data: { response:[] }, methods: { get(){ this .$http .get('http://www.asterank.com/api/asterank?query={%22e%22:{%22$lt%22:0.1},%22i%22:{%22$lt%22:4},%22a%22:{%22$lt%22:1.5}}&limit=10') .then(function(response) { console.log(response); }) } } });

my html for the trigger

<div id="app"> <button @click="get">GET</button> </div>

the error in the console says GET: 500 (INTERNAL SERVER ERROR)

XMLHttpRequest cannot load http://www.asterank.com/api/asterank?query={%22e%22:,%22i%22:,%22a%22:}&limit=10. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.

Pls Help Thanks

I'm looking to make the img tag selectable. I mean to obtain a boolean value true/false if the photo it's selected or deselected. Any ideas?

<h2 class="headline mb-2 text-xs-center">Choose your hero:</h2> <v-layout row wrap primary-title v-for="hero in heroes" :key="hero.id"> <v-flex xs6> <v-avatar size="80px" class="grey lighten-1"> <img v-bind:src="`${hero.href}`" alt="avatar"> </v-avatar> </v-flex> <v-flex xs6 class="text-xs-right"> <v-subheader>{{hero.name}}€</v-subheader> </v-flex> </v-layout> </v-card> </template> <script> export default { data: () => ({ bases: [{ id: 1, name: "Spiderman", href: "../../static/spiderman.jpg" }, { id: 2, name: "Batman", href: "../../static/batman.jpg" }] }) } </script>

I know that I can access state of the app from within the components in the app but that means the component is not universal/standalone and it relies on the parent's data/state structure and I think that is wrong.

So I am wondering if I can somehow pass a selected part of the state, that the component represents, to the component as it's data(props?) without the component knowing it comes for the parent state and when the data is updated by the component the app'đ state will reflect this.

So for example if my app's state has data with with 'fields' and each of its values represent a form text field I would build a loop for each of them to create input components and pass/connect data from this 'fields' item into the component. The comonent has no idea where the data comes from or that it represents only a small portion of the whole app. The component only handles the data in its own context.

i'm trying to make some requests using axios and the last Laravel version 5.5 after configure the X-CSRF fields and all my code is simple :

axios.post('/post-contact',{name:'Kamal Abounaim'}) .then((response)=>{ console.log(response) }).catch((error)=>{ console.log(error.response.data) })

but i get this error : 419 (unknown status) what the problem supposed to be Thanks for answering

I try to use viewpoint and I Pass the values to my waypoint it send my this message: Uncaught Error: No element option passed to Waypoint constructor,I got my code like this:

in my view galeri.vue :

<template> <div class="play-top" id="final"> <iframe src="xxxxxxxxx" allowfullscreen autoplay="false"></iframe> </div> </template> <script> require('waypoints/lib/jquery.waypoints.min.js') var ele var waypoint = new Waypoint({ element: ele = document.getElementById('final'), handler: function(direction) { if (direction == 'down') { $(ele).addClass('muestra') } else { $(ele).removeClass('muestra') } console.log(direction); } }); <script>

any idea what I am doing wrong

I am using vue.js and I want to include waypoint in my example it works well this is the original:

html:

<div id="final"> <h2>Mostar el mensaje al pasar por aqui</h2> </div>

script:

var ele var waypoint = new Waypoint({ element: ele = document.getElementById('final'), handler: function(direction) { if (direction == 'down') { $(ele).addClass('muestra') } else { $(ele).removeClass('muestra') } console.log(direction); } });

css:

.muestra { position: fixed; bottom: 20px; right: 20px; }

now a try to use this code in vue.js but it send me this message in the console:

Uncaught ReferenceError: Waypoint is not defined

any idea what I am doing wrong this time with vue thi is the code in vue.js like this

galeri.vue:

<template> <div id="final"> <h2>Mostar el mensaje al pasar por aqui</h2> </div> </template> <script> var ele var waypoint = new Waypoint({ element: ele = document.getElementById('final'), handler: function(direction) { if (direction == 'down') { $(ele).addClass('muestra') } else { $(ele).removeClass('muestra') } console.log(direction); } }); </script>

I built a custom component to which I pass a property.

<template id="friend-component"> <div> {{friend}} <div style="color:red;">{{error}}</div> <br /> <input type="button" v-on:click="addFriend" /> </div> </template> <script> Vue.component('friend', { props: ['friend'], data: function(){ return { error: '' }; }, methods: { addFriend: function () { this.error = 'You already added this friend'; } } }); </script> <friend :friend="selectedFriend"></friend>

Then, everytime the parent change the "selectedFriend", I want the data in the child component to be deleted. In this case, it means to delete the error message.

How could I do it?

Note: I figured a way to do it by using a property to store the error instead of the data object. But, Vue is constantly reminding me that I should not modify property...

Mutating a prop locally is now considered an anti-pattern, e.g. declaring a prop and then setting this.myProp = 'someOtherValue' in the component. Due to the new rendering mechanism, whenever the parent component re-renders, the child component’s local changes will be overwritten. Source

My page currently has Navigation.vue component. I want to make the each navigation hover and active. The 'hover' works but 'active' doesn't.

This is how Navigation.vue file looks like :

<template> <div> <nav class="navbar navbar-expand-lg fixed-top row"> <router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link> <router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link> <router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link> <router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link> </nav> </div> </template>

And the following is the style.

<style> nav li:hover, nav li:active{ background-color: indianred; cursor: pointer; } </style>

This is how hover looks like now and expected exactly same on active.

I would appreciate if you give me an advice for styling router-link active works. Thanks.

I'm using vue2-selectize to display list of options fetched from axios call:

<template> <selectize v-model="selected" :settings="settings"> <option v-for="option in options" :value="option.id"> ({{ option.author }}) - {{ option.description }} </option> </selectize> </template> <script> export default { props: ['old-value'], data() { return { selected: this.oldValue, options: [], settings: { preload: true, placeholder: "Search All Authors", dropdownParent: 'body', closeOnSelect: true, render: { option: function (data) { console.log(data); return '<div>' + data.displayName + '<div class="item-bio">' + data.bio + '</div>'; } }, load: async (query, callback) => { axios.get(route('api.showAllAuthors')).then(response => { this.options = response.data; callback(); }) } }, } }, } </script>

The issue is that once you setup the <option> for the select you can only work with the two values it passes to the render function (text and value) and not the original object (whereas the actual <option> has access to this object).

The manual mentions the optional parameter of dataAttr available for <option> tags, but setting <option :data-data="option"> has no effect and I still can't access the original properties.

How can I access the original JSON attributes that the <option> is using in the render function?

so I'm working with Axios in VueJS to send ajax requests. However I'm getting a bit of a problem when trying to send requests.

This is my JS code:

axios.post('http://localhost/app/php/search.php', { query: this.search //this should send the 'query' param }).then(response => { this.variable = response.data }).catch(e => { this.errors.push(e) })

And this is the search.phpfile:

<?php require '../Functions.php'; $obj = new Functions(); $array = $obj->search($_POST['query']); echo json_encode(array_values($array)); ?>

And I'm getting the following error on the PHP side: Notice: Undefined index: query in /path/to/app/search.php on line 6

Any reason as to why this is happening? Any help is greatly appreciated.

I am using a d3.js plugin to create a complex visualization in my Vue.js application. I would like to apply a custom vue directive to the elements that were added by the d3 plugin.
It looks like the $compile functionality that was deprecated in vue2 is what I am looking for.

How can I add dynamically change the elements in the dom to vue components?

I use vagrant to configure different VirtualBoxes under Linux.

My goal is that any colleague of mine would just have to visit a intranet-site and choose the VirtualBox that he wants to have on his/her machine. After selecting one or multiple boxes he or she might just click onto "proceed with installation" so that the respective vagrant directory/ies with its Vagrantfile(s) is/are checked out and execution with vagrant up is triggered.

So I want to abstract as much as possible from the console and make it look state of the art / fancy.

What technologies should I use?

I thought of vue.js together with node.js? Would that be a viable approach to get to my goal?

i'm doing a shopping cart in this amazing tool called Vue js also with Vuetify. Right now i'm stacked because I don't know how to obtain the boolean value true/false and add the price to the amount value if it's true or remove the price if it's false. Does anyone have any suggestion or knows a cool resource to solve this kind of issues?

<v-container grid-list-md text-xs-center> <v-card class=""> <h2 class="headline mb-0">Extra ingredients:</h2> <v-layout row wrap class="text-xs-center" v-for="ingredient in ingredients" :key="ingredient.id"> <v-layout column> <v-flex xs6> <v-checkbox name="checkbox" color="light-blue lighten-2" v-bind:label="`${ingredient.name}`" v-model="ingredient.checked" light></v-checkbox> </v-flex> </v-layout> <v-layout column> <v-flex xs6> <v-subheader>{{ingredient.price}} €</v-subheader> </v-flex> </v-layout> </v-layout> <v-divider></v-divider> <v-layout row wrap class="mb-3"> <v-flex xs6> <h3 class="headline mb-0">Total price:</h3> </v-flex> </v-layout> </v-card> </v-layout> <script> export default { data: () => ({ checked1: '', ingredients: [{ id: 1, name: "cheese", price: 2, checked: '', }, { id: 2, name: "ham", price: 2.0, checked: '', }, { id: 3, name: "Bacon", price: 2.25, checked: '', }, { id: 4, name: "spinac", price: 1.6, checked: '', }, { id: 5, name: "extracheese", price: 2.5, checked: '', }, { id: 6, name: "pepper", price: 2.75, checked: '', }], }), computed: { total() { var total = 0; for (var i = 0; i < this.ingredients.length; i++) { total += this.ingredients[i].price; } return total; } }, methods: { addToCart(item){ amount = 0; if(ingredient.checked == true){ amount += ingredient.price; } else { amount -= ingredient.price; } } } } </script>

I am using single file components with vue-router and vue-2.0 and I am having an issue I can't seem to be able to resolve. The this.$route object called from a component always returns empty values.

e.g.

Messages.vue

<template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Post List</div> <div class="panel-body"> <li v-for="item in items"> {{ item.message }} </li> </div> </div> </div> </div> </div> </template> <script> export default { created() { console.log(this.$route); }, mounted() { console.log('Component mounted.') }, data() { return { items: [ {message: 'Foo'}, {message: 'Bar'} ] } }, } </script>

App.js

import Vue from 'vue'; import VueRouter from 'vue-router'; import Messages from './components/Messages'; Vue.use(VueRouter); const routes = [ { path: '/user/get/:id', component: Messages}, ] const router = new VueRouter({ routes }) const app = new Vue({ router, el: '#app', components: { Messages } });

Any help will be greatly appreciated.

this is my first time using Vue.JS so I apologize if the solution is simply and I'm just not seeing it. Here's a code snippet of what I have:

<div class="col-12" v-if="calendar.amenities"> <div class="form-group"> <label for="transportSelect" class="calendar__transport-label">{{$t("message.transportLabel")}}</label> <div id="transportSelect" class="form-group calendar__transport-list"> <div v-for="(amenity, amenityIndex) in calendar.amenities" class="calendar__transport-option" :key="amenityIndex"> <label> <input id="transportSelect" type="radio" :value="amenity.id" v-model="value"> <span>{{amenity.description}}</span> </label> </div> </div> </div> </div>

I'm trying to just get a simple radio buttons that allow user's to select one option, with the first option selected as default. Any help is much appreciated!

How to do looping for each two data using modulus? In case I want to do a looping for every two data get a sequential class. Example :

I have 6 data :

• Data A
• Data B
• Data C
• Data D
• Data E
• Data F

So the final result I want to make is to give the class to each data with modulus every two data. I will have results :

• Data A | Class 1
• Data B | Class 1
• Data C | Class 2
• Data D | Class 2
• Data E | Class 3
• Data F | Class 3

The class name will always be increased using the counter if any new data is entered.

I have created the sample code below :

var app = new Vue({ el: '#app', data() { return { items: [{"id": "111","nama": "George",},{"id": "222","nama": "Paul",},{"id": "333","nama": "Mira",},{"id": "444","nama": "Doms",},{"id": "555","nama": "Brian",},{"id": "666","nama": "Oscar",}] } }, methods: { computedClass(index) { defValue = 1 if (index % 2 === 1) { return "data_1" } } } }); .item { pading: 10px; } .data_1 { color: #FF0000; } .data_2 { color: #0000FF; } .data_3 { color: #00CC00; } <script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script> <div id="app"> <div class="item" :class="computedClass(index)" v-for="(item, index) in items" >{{item.nama}}</div> </div>

but I am confused to do counter and modulus so that every two data I get the name of the class is also being incremented with counter.

In my code above, I can only do modulus of every second data. Not every two data. And I am confused to do class naming with counter

Can you help me. Thanks

New to Vue.js .

I have a navigation component which is rendered in the main App.vue page. I don't want it to be shown on the first page.

I know I can use something along the lines of:

`navigation(v-if="this.$route.fullPath !== '/'")`

but where and how, inside export default? Are there any other files I have to alter (main.js / router.js)?

This is how I have the main App.vue page laid out at the minute:

I tried this, but it didn't work: