Software

I have a component with some form validation. It is a multi step checkout form. The code below is for the first step. I'd like to validate that the user entered some text, store their name in the global state and then send then to the next step. I am using vee-validate and vuex

<template> <div> <div class='field'> <label class='label' for='name'>Name</label> <div class="control has-icons-right"> <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last"> <span class="icon is-small is-right" v-if="errors.has('name')"> <i class="fa fa-warning"></i> </span> </div> <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p> </div> <div class="field pull-right"> <button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button> </div> </div> </template> <script> export default { methods: { nextStep(){ var self = this; // from baianat/vee-validate this.$validator.validateAll().then((result) => { if (result) { this.$store.dispatch('addContactInfoForOrder', self); this.$store.dispatch('goToNextStep'); return; } }); } }, computed: { name: function(){ return this.$store.state.name; } } } </script>

I have a store for handling order state and recording the name. Ultimately I would like to send all of the info from multi step form to the server.

export default { state: { name: '', }, mutations: { UPDATE_ORDER_CONTACT(state, payload){ state.name = payload.name; } }, actions: { addContactInfoForOrder({commit}, payload) { commit('UPDATE_ORDER_CONTACT', payload); } } }

When I run this code I get an error that Computed property "name" was assigned to but it has no setter.

How do I bind the value from the name field to the global state? I would like this to be persistent so that even if a user goes back a step (after clicking "Next Step") they will see the name they entered on this step

I am having an issue and please forgive me for being relatively new to vue. I have this component:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <template> <table class="table table-bordered table-hover table-responsive"> <thead> <tr> <th>File Number</th> <th>Client</th> <th>Borrower</th> <th>Address</th> <th>City</th> <th>State</th> <th>Zip</th> <th>Appraiser ID</th> <th>Paid Status</th> <th>Process Status</th> <th>Order Status</th> <th>Last Update Time</th> <th>Loan Number</th> <th>Due Date</th> <th>Appraiser Due Date</th> </tr> </thead> <tbody> <tr @click="onSelected(order)" data-toggle="tab" href="#orders" role="tab" aria-controls="orders" v-for="order in orders"> <td>{{order.id}}</td> <td>{{order.client_id}}</td> <td>((Jackson))</td> <td>{{order.address1}}</td> <td>{{order.city}}</td> <td>{{order.state}}</td> <td>{{order.zip}}</td> <td>{{order.appraiser_id}}</td> <td>{{order.paid_status_id}}</td> <td>{{order.process_status}}</td> <td>{{order.order_status}}</td> <td>{{order.last_update}}</td> <td>{{order.loan_number}}</td> <td>{{order.due_date}}</td> <td>{{order.appraiser_due_date}}</td> </tr> </tbody> </table> </template> <script> export default { /* * The component's data. */ data() { return { orders: [] }; }, /** * Prepare the component (Vue 1.x). */ ready() { this.prepareComponent(); }, /** * Prepare the component (Vue 2.x). */ mounted() { this.prepareComponent(); }, methods: { onSelected: function(order) { CurrentOrder.$emit('updateCurrentOrder', order); }, /** * Prepare the component (Vue 2.x). */ prepareComponent() { this.getPrecedenceOrders(); }, /** * Get all of the precedence orders for the user. */ getPrecedenceOrders() { axios.defaults.baseURL = 'https://someurlgoeshere'; axios.get('/api/makeacallsomewhere', { headers: { 'Content-Type' : 'application/json', 'Accept' : 'application/json', 'Authorization' : 'Bearer ' + token, } }) .then(response => { this.orders = response.data; }); } } } </script>

This has worked really well for me. However, at this point I am a little lost and I understand this question may be too vague and or not specific enough for this community. The @click="onSelected(order)" is supposed to update the order information in the orders tab. However, I can't get that to work. Can anyone help me out with an example in how to do that? The orders tab will have a separate component.

If this is too vague please just let me know and I can remove this question.

Thanks!

I am using waypoint and it send me this message:

Uncaught TypeError: Cannot read property 'each' of undefined

this is how I got the code with vue.js + rails:

<template> <div id="playerContainer final"> <iframe src="xxxxxxxxx" allowfullscreen></iframe> </div> </template> <script> require('waypoints/lib/jquery.waypoints.min.js') export default { mounted(){ var ele 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 will really appreciate guys if you ca help me with this issue.

I have a simple website that uses async components. Here's an example of one:

Vue.component('news', function(resolve, reject){ let data = { action: 'load_news_article', article_id: 0 // need the article ID here }; $.post(window.ajax_url, data, function(r){ r = JSON.parse(r); if( r.success ) { resolve({ template: r.data }); } }); });

I have dynamic routes that map to this component as well. Those <router-link> URL's look like /news/some-article. I created the route as /news/:article in the router.

How can I access the article variable before firing my ajax? My goal is to pass it to the server along with the initial component load. If Vue doesn't allow that, then I can't think of any other way other than letting the router navigate the page, then I parse the new URL with my own JS.

It's a really simple website. There's only 5 components (one for each page) and only this one is dynamic. So I'm looking for a solution that doesn't require me to overhaul my structure.

I am trying to create a simple site with flat-file content management, and a Vue.js front-end. I hope to approximate the following file structure:

app - various vue files and folders - data.json - posts - - post1.md - - post2.md

There would be some kind of build process that takes each markdown file in app/posts, processes the markdown, and stores everything in app/data.json. Then the vue.js front-end can just import data.json and use it to hydrate various components as needed.

The problem I am having in finding a solution is that there are tons of flat-file CMS out there, but very few of them seem to allow you to get between the processing of the flat files and the rendering of the templates. Most of the flat-file CMS I have encountered are designed to generate a static site folder structure of html documents. Since I intend to use a front-end framework with routing (I am using Vue, but it could be React, Choo, etc.), I need a flat-file CMS that will easily dump the data it processes from the folder structure into a single JSON file that can be adapted to serve as the data model for Vue.

I've Googled this many times and in many ways. The fact that so few results come back, in spite of the omnipresence of front-end js frameworks, is making me wonder if there's some obvious reason you wouldn't build a site this way, or some key term I'm missing.

So, my questions:

1. Is there a flat-file CMS that allows you to easily harvest the data it extracts without generating a full static site?

2. If not, why? Is it that the processing of a folder full of markdown files is simple enough that it should just be done with a custom npm script? Is there a glaringly obvious reason that generating a js-framework-friendly mini-database from a flat file system is a dumb idea?

I'm making a Vue 2.0 Progressive Web App with the Quasar Framework, and I'm trying to make the drawer in the left slot of the layout close when a menu item is clicked.

This is the component script Home.ts:

import Vue from 'vue'; import Component from 'vue-class-component'; import { QIcon, QLayout, QList, QListHeader, QItem, QItemMain, QItemSide, QToolbar, QToolbarTitle, } from 'quasar'; @Component({ name: 'Home', components: { QIcon, QLayout, QList, QListHeader, QItem, QItemMain, QItemSide, QToolbar, QToolbarTitle, } }) export default class Home extends Vue { $refs: { layout: QLayout // Cannot find name 'QLayout' }; public newPainting() { this.$refs.layout.toggleLeft(); this.$router.push(`painting/new`); } }

This doesn't compile because of the Cannot find name 'QLayout' error, but when I change the type of this.$refs.layout to any, it works.

I'm confused as to why it can't find QLayout, since it's being used in the @Component() decorator.

This is the Home.vue file for the component (mostly taken from the default one you get when you use quasar-cli to scaffold a layout):

<template> <q-layout ref="layout"> <q-toolbar slot="header"> <!-- opens drawer below--> <button class="hide-on-drawer-visible" @click="$refs.layout.toggleLeft()"> <q-icon name="menu"></q-icon> </button> <q-toolbar-title> echroma </q-toolbar-title> </q-toolbar> <!-- Left Side Panel --> <div slot="left"> <q-list no-border link inset-delimiter> <q-list-header>Menu</q-list-header> <q-item @click="newPainting()"> <q-item-side icon="add_to_photos" /> <q-item-main label="New Painting" sublabel="Start evolving a new painting!" /> </q-item> </q-list> </div> <router-view /> </q-layout> </template> <script> import Home from './Home' export default Home </script> <style> </style>

Is there any reason why QLayout wouldn't be accessible from inside the class declaration?

Starting with Vue.js and wanted to give it a try to the example that comes with laravel.

No component is displayed and in console I get

[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Example> <Root>

Not a fresh install, upgraded from 5.2->5.3->5.4

resources/assets/js/app.js

/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ Vue.component('example', require('./components/Example.vue')); const app = new Vue({ el: '#app' });

resources/assets/js/components/Example.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">Example Component</div> <div class="panel-body"> I'm an example component! </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>

This is the blade in which I have the js

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css/app.css"> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body> <div id="app"> <example></example> </div> <script src="js/app.js" charset="utf-8"></script> </body> </html>

Let's say I have the following data:

data: function() { return { a: "hello", b: { title: this.a + " BOB"; } } }

When I pass this in a component, the this.a is undefined.

<component :pass-data="b"></component>

How do I send that nested property?

I build small project with vue.js here my code in main.js

import Vue from 'vue' import App from './App.vue' new Vue({ el:'#app', render:h => h(App) })` that error appear when I saved my style and reloade the page enter image description here

I started learning vuejs recently and build and app with firebase for authetication. I got a problem after i installed the webpack theme and tried to remove the default hashtag on links. When i insert the mode:history it doesnt redirect me after i login to my hello page. When i remove it everything works fine.

My index.js (under my router folder):

Vue.use(Router) const router = new Router({ mode: 'history', routes: [ { path: '*', redirect: '/login' }, { path: '/', redirect: '/login' }, { path: '/login', name: 'Login', component: Login }, { path: '/sign-up', name: 'SignUp', component: SignUp }, { path: '/hello', name: 'Hello', component: Hello, meta: { requiresAuth: true } } ] }) router.beforeEach((to, from, next) => { let currentUser = firebase.auth().currentUser; let requiresAuth = to.matched.some(record => record.meta.requiresAuth); if (requiresAuth && !currentUser) next('login') else if (!requiresAuth && currentUser) next('hello') else next() }) export default router

Pls let me know if you need anything else for solving my issue.

I have a strange issue at the moment, and I'm looking for any insight on how to deal with this.

I'm currently accepting HTML input using the Basecamp Trix editor.

When I send the input to my Laravel application, it is saved to my database as:

<div>&lt;script&gt;alert('test');&lt;/script&gt;</div>

However, the problem is that when I insert this into a Vue property using Laravel's blade, it actually converts it back into valid HTML:

<reply :data-reply="{{ $reply }}"></reply>

Result:

The problem is, I can't sanitize this because the HTML data is actually escaped in my database, but when Laravel converts my reply to JSON, it actually unescapes the script tags, and it's actually ran in Vue when using the v-html directive.

I know I'm not supposed to accept user input while using the v-html directive, but I need HTML support for replies, and I can't sanitize already escaped HTML in my Laravel application.

Does anyone have any ideas how I can go about sanitizing Trix's content in some way?

I'm creating an internal messaging app in Vue and would like to expose a limited number of predefined variables for a user to choose from when sending a templated message (name, department, etc.).

I'm planning on displaying the rendered variables in a "preview" component which ideally would take the raw html, complete with {{variables}}, fetch the values for the variables and render the preview.

Judging from https://vuejs.org/v2/guide/components there are a number of options that would seem to work, is there an objectively better/worse solution?

I want to execute a simple function after an event is emitted from the child component. The problem is the child component emits data that I need as a parameter for my function.

How can I inject the parameter and run the function in one line in the component?

<div v-on:posted="runTask"> </div>

Or

<div @posted="runTask"> </div>

Important: I would like it to fit in the template (v-on:event or @event) because I want to keep the component in the PHP blade template.

I have an interesting situation as follows. I have:

• a parent component that does a web service call for a list of results (websites)
• it then renders a "result item" component (v-for) for each result
• then each "result item" component fires off a number of web service calls to get scores for that url and display them beside it.

Basically the component tree is:

• page
  • result item (many)
    • x score
    • y score
    • z score

Up until now I've been able to pass down the tree using props just the web url of the result item to the scoring components and keep the score service call and data local to each score component. This nicely separates all the logic.

Nonetheless, what I'd like to achieve now is:

• Result items v-for list re-orderable based on the "x score", "y score", "z score" async calculated values via user-controlled dropdowns on the page component (e.g. order by x/y/z dropdown and asc/desc dropdown).
• Results list re-order as the score values come in async-ly (i.e. reactive upfront)

I've been looking at Vuex, and it seems like it may be the best approach but before I dive all the way in I'd like to verify my thoughts and if people think it'd actually work.

Should I:

• Use a Vuex store to hold my list of results
• Use a mutation to store the initial results list (list of objects with id/url)
• Use a computed property in the page component like "orderedResults" and render the "result item" components with v-for from that
• Use mutations on each scoring component to add the scores to each result item in the store (prob with set method to ensure reactivity on new prop). And does this mean I need to pass an id of the result item and the new score then do a lookup in the result items by id to find and modify it, or can I pass through in the mutation payload the ref I have of the result item given down via props and just use that in the mutation function directly?

Is this the best way to do it? Any gotchas? Thanks!

I would like to know how I can send data between two components. So I would like to send to another component the dynamic value which is rendered on selectedBase.price, and be rendered on another component. I've tried with props but not succeed.

<v-layout row wrap primary-title v-for="base in bases" :key="base.id"> <v-layout column> <v-flex xs6 offset-xs3> <v-avatar size="80px" class="grey lighten-1"> <img :src="base.href" :class="{selected: selectedBase.id == base.id}" @click="selectedBase = base" alt="avatar"> </v-avatar> </v-flex> </v-layout> <v-layout column> <v-flex xs6 offset-xs4> <v-subheader>{{base.name}} {{base.price}}€ {{selectedBase.price}}</v-subheader> </v-flex> </v-layout> </v-layout> <script> export default { data() { return { selectedBase: {}, bases: [{ id: 1, name: "black", price: 4, href: "../../static/black.jpg" }, { id: 2, name: "white", price: 6, href: "../../static/white.jpg" }] } }, computed: { totalBase: function() { var totalBase = 0; for (var i = 0; i < this.bases.length; i++) { if (this.bases[i].selected) { totalBase += this.bases[i].price; } } return totalBase; } }, methods: { getSelectedBase() { return this.selectedBase; } } } </script>

So let's assume we have a variables scss file like the following

$darken-percentage: 15%; $primary-color: #2aaae1; $dim-primary-color: darken($primary-color, $darken-percentage); $complementary-color: #faaf48; $dim-complementary-color: darken($complementary-color, $darken-percentage); $background-color: #1d1f29; $middleground-color: #313444; $dim-middleground-color: darken($middleground-color, $darken-percentage); $light-middleground-color: lighten($middleground-color, $darken-percentage);

In the main.js we could use @import 'variables.scss' what if I have two themes and I want to change on user action I could have 2 variables files and conditionally import either based on user actions but what about single file vue components like

<style scoped lang="scss"> @import '../../theme/_variables.scss'; .bm-upload{ background: $primary-color; } </style>

Then the import will not work so is there anyway for me to have global variables files and use it in other files without re importing it

I have been trying to figure out how to use VueJS, Axios and Python together. I can make a post request to the python file just fine. When I click the submit button, the response data shows correctly, but only for a second and then disappears. Why is this?

insert.py

#!/usr/bin/python3.6 import os import sys import json parsed_json = json.loads(sys.stdin.read()) print ("Content-type: text/html\n") print(parsed_json['firstName']) print(parsed_json['lastName'])

index.html

<!DOCTYPE html> <html lang="en"> <head> <title>index.html</title> </head> <body> <form id="example-1"> <input type="text" ref="firstName"> <input type="text" ref="lastName"> <button v-on:click="submit">Submit</button> {{ output }} </form> <script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var example1 = new Vue({ el: '#example-1', data: { output: '' }, methods: { submit: function () { axios.post('/cgi-bin/insert.py', { firstName: this.$refs.firstName.value, lastName: this.$refs.lastName.value }) .then(response => { this.output = response.data; }) .catch(function (error) { console.log(error); }); } } }) </script> </body> </html>

I'm passing a data URI as a prop to a Vue component and binding it to the src attribute of an img element, but the image does not appear. Here's the relevant code:

Passing the prop to the component (ignore the image_ratio key name, it's a data URI):

<media-image v-if="event.media_type === 'image'" :url="event.media_url" :caption="event.media_caption" :imageUri="event.image_ratio"></media-image>

Accepting the prop within the component:

props: [ 'url', 'caption', 'imageUri' ],

And using binding the src to the prop:

<img :src="imageUri" :data-src="url" class="img-fluid" :id="imageId" :alt="caption">

Other relevant info:

• The prop is successfully being passed to the component (it appears as a prop using vue-devtools).
• The data URI appears in the DOM as the src of the img element when inspecting it using DevTools.
• Copying the data URI and using it as the src of an img element outside of a Vue component works fine.

Thanks!

I have SPA with Laravel and I have main.js file and I set up this file in my main.blade.php file and I write some code in main.js with jquery plugins. Problem is when I change vue-router not working this plugins so main.js file, but when I refresh page everything is fine working.Any idea?

I've been using ...mapGetters a lot in my solution with success, but now that i need to access the variable directly in the data() section, it seems that the variable isn't set/ready when accessed..

the mapGetters are in the computed:{} section..

When debugging i notice that data() runs before computed:, so.. do i need to put a watch in some way here ?

Code :

data(){ return { FiltersVisible: false, orderList: { currentPage: 1, totalPages: ordersCount / 20, // totalPages:80, itemsPerPage: 20 } } }, computed: { ...mapGetters(['orders', 'ordersCount']) // ...mapGetters(['orders']) },

Screenshot of Vue state (Chrome)

Notice that the getters are initialized correctly....