Software

I encountered with problem when develop application. I use Vue + Vuetify with typescript, but I don't want to create SPA application or use webpack for work with .vue components, I need to create several page, where I create each times new Vue instance. But when I create for example

import * as Vue from 'Vue'; import axios from 'axios'; <any>window.vue = new Vue({ el: "#app", data: { drawer: true, mini: false, totalItems: 0, items: [], headers: [, { text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, ], }, methods: { getData() { axios.get("http://exmaple1234.com/api/list") .then((response) => { this.$data["totalItems"] = 1; this.$data["items"] = [ { value: false, name: 'Frozen Yogurt', calories: 159, fat: 6.0, } ]; }) } }, mounted() { this.$options.methods["getData"].call("getData"); }, });

My tsconfig.json

{ "compilerOptions": { "alwaysStrict": true, "noImplicitAny": false, "noEmitOnError": true, "removeComments": true, "sourceMap": false, "target": "es5", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "lib": [ "es2017", "dom", "dom.iterable" ] }, "exclude": [ "node_modules" ], "compileOnSave": true }

With typescript I can't use this.totalItems, this.items and I can't call this.getData() in mounted(), but when I debug in browser my code, I see that object "this" has all these properties and methods.

I use property $data["property"] name and $options.methods["methodName"] in order to work with it, but I understand that isn't correct approach. I read in Vue documentation about ComponentOptions which help to create interface or vue-class-component, but all these tools use components, which I want to avoid.

Can I use vue + typescript in this case? I'd appreciate tips to my question

i am new in vue jsand i want to use vue boilerplate from https://github.com/marcosmoura/vue-boilerplate.

When i try to run this using command npm run dev it will generate one link ex:http://localhost:8080

When i run this link into browser, this error occurs and i am not able to do any thing

Please help me with this if any one know about it.

I don't get it .. why my import is wrong ?

here is my project structure

project src components ... ... vuex actions.js getters.js mutation_types.js mutations.js store.js App.vue main.js test unit specs vuex mutations.spec.js

Here is my test spec file w the imports

// mutations.spec.js import mutations from 'src/vuex/mutations' import { ADD_SHOPPING_LIST } from 'src/vuex/mutation_types' ...

here is my package.json script

"scripts": { ... "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", ... },

when I execute: npm run unit

I get MOdule not found

terminal cd project npm run unit ERROR in ./test/unit/specs/vuex/mutations.spec.js Module not found: Error: Can't resolve 'src/vuex/mutations' in '/Users/myself/Developments/project/test/unit/specs/vuex'

what's wrong ? isn't relative to the project directory ?

thanks for feedback

I have navbar like this:

<template> <nav class="navbar"> <p style="color:white; text-align:center;">{{msg}}</p> </nav> </template>

And I import it in all my pages (components). How to return {{msg}} on all pages? I mean something like:

msg: 'index'

Looking for recommendations on a calendar plugin for a Laravel project.

I would like the plugin to display months then when a user clicks the year it takes them back a step to a year selection, then clicking on a year takes you into the months for that year. Something like below, appearance is not important as I will customise this to match the application. Clicking on a month will display information relating to that month but again that will be done by myself, just need a good solution for the year/month selection.

How do I add enter-active-class to transition in custom directives? now enter image description here

But this cannot satisfied with my request，I need define enter-active-class with custom directives,so I need your help,thanks!

I have embedded a Vue component for a Activity Feed on a page inside a jQuery Mobile website.

The script loads 10 activities per request and adds them to the end of the list - triggered by scroll

If i click on a activity (for example "user added photo") it takes me to that user's profile. If I swipe back (on my phone) or hit back in browser it takes me back to the page and the feed reinitialises.

Any method for going back to the same state and to not being forced to load all the activities that were previously loaded and scroll to the specific one ?

I am trying to set the style of a div with

<div v-for="q in questions" v-bind:class="{seen:isseen(q),unseen:isunseen(q)}">

The problem is that these functions get computed for each q, but I also need them to get recomputed when a different variable updates.

methods:{ isseen: function(id_1){ if(ans[id_1]==2) return true; else return false }, isunseen:function(id_1){ if(ans[id_1]!=2) return true; else return false; } }

Here, I need the

v-bind:class="{seen:isseen(q),unseen:isunseen(q)}"

computed even when ans[id_1] changes.

I have looked at the computed and watch approach, but cannot figure out what will work here.

I start up a new Laravel + Vue + Stylus project, and i can't normally work because i always got blank page when adding/editing some styles on .styl files. And when i edit my .vue templates it come back to normal state.

My main.js file:

import Vue from 'vue'; import VueRouter from 'vue-router'; import { routes } from './routes/index'; import App from './App.vue'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes }); new Vue({ el: '#app', router, render: h => h(App) });

My webpack.mix.js file:

mix.js('resources/assets/js/main.js', 'public/js') .stylus('resources/assets/stylus/app.styl', 'public/css') .browserSync('localhost:8000');

Some strange thing that i noticed is that when i save my .styl file i got main.js like prod version(not compiled) and in console has an error:

Uncaught SyntaxError: Unexpected token import

If i save this file again i got normal compiled main.js file, but it doesn't render my App

And finally when i edit .vue templates all works perfect.

I am trying to implement a Vue table by using Vue table plugin in my application using node module. Here I am getting an error while using all Vue table component. Here I install all Vue table plugin using npm and import them in my custom component.

My snippet of code is attached here with.

import Vuetable from 'vuetable/src/components/Vuetable.vue'; import VuetablePagination from 'vuetable/src/components/VuetablePagination.vue'; import VuetablePaginationDropdown from 'vuetable/src/components/VuetablePaginationDropdown.vue';

Here first I import the vue table plugin into my component. Then register such component into my custom component into vue instance.

data () { return{ columns: [ 'name', 'nickname', 'email', 'birthdate', 'gender', '__actions' ] } }, components : { Vuetable, VuetablePagination, VuetablePaginationDropdown }

And in template section i write this block of code.

<vuetable api-url="http://vuetable.ratiw.net/api/users" table-wrapper="#content" pagination-component="vuetable-pagination" :fields="columns"> </vuetable>

I have some data that I will loop using v-for. But I am a little confused when I want to display data using custom looping, like modulus.

The result I want is data shown every three items, will do grouping so have different class every 3 items.

The data I want :

<div class="col-md-4 hidecontent data_1" content="#data_0">1 Blablablabla</div> <div class="col-md-4 hidecontent data_1" content="#data_1">1 Blablablabla</div> <div class="col-md-4 hidecontent data_1" content="#data_2">1 Blablablabla</div> <div class="col-md-4 hidecontent data_2" content="#data_3">2 Blablablabla</div> <div class="col-md-4 hidecontent data_2" content="#data_4">2 Blablablabla</div> <div class="col-md-4 hidecontent data_2" content="#data_5">2 Blablablabla</div> <div class="col-md-4 hidecontent data_3" content="#data_6">3 Blablablabla</div> <div class="col-md-4 hidecontent data_3" content="#data_7">3 Blablablabla</div> <div class="col-md-4 hidecontent data_3" content="#data_8">3 Blablablabla</div>

You see, data_1 has 3 items. data_2 has 3 items and data_3 has 3 items

My Looping data :

<div class="col-md-4 hidecontent" v-for="(item, index) in this.$parent.items" :key="item._id" :content="['#data_' + index]"> <div class="features_item sm-m-top-30"> <div class="f_item_text"> <img v-bind:src="item.picture"> <span>{{ countTitle(item.title) }}</span> <p>{{ countSting(item.body) }}</p> </div> </div> </div>

I am confused when creating a modulus condition like :

if(i % 3 === 2)

How do I get every 3 recurrence data added to class names starting from data_1 and so on for the next 3 data

I am working on an Vue application that allows you to choose from a list of companies. You can search for companies, select one from the list that comes up and then click a submit button that (for now) calls a function that console.logs the company you have chosen.

I have been using a select tag to display a list of companies and then console.log-ing what the users pick from this list. This works fine, but I would like to use datalist to to the same thing instead because it looks better with the search function I made.

However, when using datalist, the new data from the option that the user picked isn't shown in the console. It still displays the same companyId data that user was assigned when they logged in. It seems like the companyId data doesn't change in the same way as when using the select-tag.

Is there a way to make the datalist work in the same way as a select-tag, so that the data in companyId changes and is displayed in the console?

Here is my html template (with a datalist tag instead of select):

<template> <div class="select-company-search-box"> <label for="search-box">Company<br></label> <i class="fa fa-search" aria-hidden="true"></i> <input list="search-companies" id="search-box" type="text" v-model="search" placeholder="Type to search"></input> <datalist id="search-companies" v-if="filteredCompanies.length < 10" v-model="companyId"> <option v-for="company in filteredCompanies"> {{ company }} </option> </datalist></br> <button class="submit-button" @click="changeCompany()">Submit</button> </div> </template>

And here is my data and functions. The filteredCompanies() function filters through the company list and only displays relevant options, so that the entire list isn't displayed:

<script> export default { name: 'selectCompany', data() { return { companies: [], search: '', companyId: '', }; }, mounted() { reportService.general.getCompanies(this.editionId = store.getters['auth/user'].selectedEdition).then((response) => { this.companies = response; }); }, methods: { changeCompany() { changeCompany(companyId) { console.log(companyId); }, }, computed: { filteredCompanies() { return this.companies.filter(company => company.toLowerCase().match(this.search.toLowerCase())); }, }, }; </script>

I registered component in my app.js like this:

Vue.component('navbar', require('./components/Navbar.vue'));

Now I want to import that component:

<template> <nav class="navbar">CODE HERE</nav> </template>

Into my blade.php file:

<body class=""> <div id="app"> <div class=""> <navbar></navbar> <-- here! @yield('content') </div> </div> </body>

What's the easiest way to do this?

I'm having this problem with Vue Router.

My scenario is to allow / to be loaded first, fetch some data from there and then it will go to /chat/:chatId route and render UI there, where :chatId param is set from the data I got from API.

I have / and ['chat', 'chat/:chatId'] as route alias.

I have in-component guard for this matter.

beforeRouteEnter(to, from, next) { store.dispatch('fetchOpenSessions') .then(() => { const firstChat = Object.keys(store.state.chatsidebar.openSessions)[0]; next({ name: 'chat', params: { chatId: firstChat } }); }); },

However this code ends up looping infinitely, causing the browser to hang.

My question is, how do I set chat/:chatId if my initial route is / or /chat without getting into infinite loop?

I am trying to update the data when doing on-change from the select box. Currently, i am able to the first time with the button click and also with on change. But I am not able to when doing the on-change multiple times.

<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="row"> <empView v-if='loaded' :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>

Javascript part:

data () { return { loaded: false, emptData: {}, empfilterlist: [ { text: 'Department', value: '1' }, { text: 'Status', value: '2' }, ], selectedemp: '', } }, methods: { filterempdata: function (selectedoption) { console.log('Onchange value - ' + selectedOption) Vue.set(this.empData, 'Department', selectedoption) }, getEmpDetails: function () { this.$http.get('http://localhost:7070/getemmdata') .then((response) => { this.empData = response.data this.loaded = true }, response => { console.log('test' + JSON.stringify(response)) } ) }

Child component javascript code:

export default { name: 'empView', props: ['empDetails'], data () { return { empid: this.empDetails.id, empname: this.empDetails.name } }, watch: { workflowDetails: function (changes) { console.log('data updated ' + JSON.stringify(changes)) this.empid = changes.id this.empname = changes.name this.department = changes.Department } } }

My case like this :

My view blade laravel like this :

{!! Form::open(['route' => 'shop.payment']) !!} <input type="hidden" name="result_type"> <input type="hidden" name="result_data""> ... <input type="radio" name="payment_method" value="transfer"> .... <checkout-view></checkout-view> {!! Form::close() !!}

In view blade laravel exist vue component of checkout view

The component like this :

<script> export default{ template:'<button @click="checkout" class="btn btn-danger pull-right" type="submit">Checkout</button>', methods: { checkout(e){ if(window.Laravel.hasOwnProperty('auth')) { $('#payment-form').attr('action', '/shop/payment/checkout') return true; } else { $('#payment-form').attr('action', '/shop/detail') $("#payment-form").attr('method', 'get') return true } } }, } </script>

My routes laravel like this :

Route::group(['prefix' => 'shop','as'=>'shop.'], function () { Route::get('detail', function(){ return view('shop.detail'); }); });

If no auth it will run else and the url like this :

http://myshop.dev/shop/detail?_token=FLFJ7MfWi1DZv88Uzk2lrBgVXLN6Y3WHTpskDIED&result_type=&result_data=&payment_method=transfer

I want remove the parameter, so the url like this :

http://myshop.dev/shop/detail

I try change to post

I change to be like this :

$('#payment-form').attr('action', '/shop/detail') $("#payment-form").attr('method', 'post') return true

And

Route::post('detail', function(){ return view('shop.detail'); });

But it does not work, there exist error :

POST http://myshop.dev/shop/detail 405 (Method Not Allowed)

What is the right solution to solve my problem?

I'm running a test using the headless Chrome package Puppeteer:

const puppeteer = require('puppeteer') ;(async() => { const browser = await puppeteer.launch() const page = await browser.newPage() await page.goto('https://google.com', {waitUntil: 'networkidle'}) // Type our query into the search bar await page.type('puppeteer') await page.click('input[type="submit"]') // Wait for the results to show up await page.waitForSelector('h3 a') // Extract the results from the page const links = await page.evaluate(() => { const anchors = Array.from(document.querySelectorAll('h3 a')) return anchors.map(anchor => anchor.textContent) }) console.log(links.join('\n')) browser.close() })()

And I'm running the script as: node --harmony test/e2e/puppeteer/index.js (v6.9.1)

But I get this error:

;(async() => { ^ SyntaxError: Unexpected token (

What could be the problem?

Note: I'm using Vue CLI's official Webpack template:

So I believe I understand the difference between SPAs and an ASP.NET MVC app as I have worked with both, but as I have seen a decent amount of tutorials embedding Angular, React, or Vue in ASP.NET or .NET Core apps, I am unclear as to why one would do this.

I'm not looking for right or wrong so much as what are some reason behind this architecture and is there any significant benefits?

I'm a bit new with Vue Js. I'm trying to obtain the boolean value of each checkbox from a Vue component, but when I check one, the rest ones are checked as well, so I can check just one. I've try it with computed but no results. Does anyone can give any tip please

<v-card> <v-layout row wrap class="text-xs-center" v-for="ingredient in ingredients" :key="ingredient.id"> <v-layout column> <v-flex xs6> <v-checkbox color="light-blue lighten-2" v-bind:label="`${ingredient.name}`" v-model="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-card> export default { data: () => ({ checked: [], checked1: '', ingredients: [{ id: 1, name: "tomato", price: 2 }, { id: 2, name: "Cheese", price: 2.0 }, { id: 3, name: "Frankfurt", price: 2.25 }, { id: 4, name: "Mushrooms", price: 1.6 }, { id: 5, name: "Pepper", price: 2.5 }, { id: 1, name: "Ham", price: 2.75 }], }), computed: { checked() { return this.checked } } }

I'm using Nuxt JS/Vue to create an SEO friendly Server Side Rendered JS web app. Nuxt allows setting the head option in each Vue component which it then take and via vue-meta updates the page title. I get a user based on the route and then set the title to the user's name. This works when running a local server. But when I push this up to Firebase I get the title as undefined (on refresh).

Vue Component:

<template> <div class="user"> <h3>{{ name }}</h3> </div> </template> <script> import axios from 'axios' export default { data () { return { title: 'test' } }, head () { return { title: this.name, meta: [ { hid: 'description', name: 'description', content: 'My custom description' } ] } }, async asyncData ({ params, error }) { try { const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`) return data } catch (e) { error({ message: 'User not found', statusCode: 404 }) } }, mounted () { console.log(this.name) this.title = this.name } } </script>