Software

I have 2 selects, one with data and other one empty. When first one is selected, I catch it using a switch. Now, depending on the value, I want to create option elements and put them inside empty select.

Let's say I have an array of values

var values = ['Hello', 'world', 'etc']

When selected

selected(event) { var name; switch (event.target.value) { case 'roth': // append values as options into select, using foreach // such as: // <option name="hello"></option> ... } }

This is select in my template:

<select class="form-control" :id="selection"> <option selected="" disabled="" value="0"></option> </select>

heres my app.js

{ path: '/superadmin', component: require('./components/Superadmin/Home.vue'), children: [ { path: 'users', component: require('./components/Superadmin/Users.vue'), }, ] }

heres my Users.vue

<template> <div class="d-flex"> <div class="p-2 col-4"> <b-card> <b-form-fieldset label="Username"> <b-form-input v-model="username"></b-form-input> </b-form-fieldset> <b-form-fieldset label="Password"> <b-form-input v-model="password"></b-form-input> </b-form-fieldset> <b-form-fieldset label="Confirm Password"> <b-form-input v-model="confirm_password"></b-form-input> </b-form-fieldset> <b-button variant="success">Submit</b-button> </b-card> </div>

heres my home.vue

<template> <div> <nav-bar></nav-bar> </div> </template>

and here/s my url http://localhost:8000/#/superadmin/users

my childer wont render the user.vue page i dont know whats the problem with my code can some please help me please its 3:30am here in the Philippines and my so tired of my code not working please comment your answers so i can continue with my project please oh please thank you in advance for answering

Here is my Vue

<div class="drag"> <h2>List 1 Draggable</h2> <draggable id="cat1" v-model="list" :move="checkMove" class="dragArea" :options="{group:'people'}"> <div v-for="element in list">${ element.name }</div> </draggable> <h2>List 2 Draggable</h2> <draggable id="cat2" v-model="list2" :move="checkMove" class="dragArea" :options="{group:'people'}"> <div v-for="element in list2">${ element.name }</div> <p>another</p> </draggable> </div> <script> var vm = new Vue({ el: "#main", delimiters:['${', '}'], data: { list: [{ name: "John" }, { name: "Joao" }, { name: "Jean" }], list2: [{ name: "Juan" }, { name: "Edgard" }, { name: "Johnson" }] } } </script>

This works great. The data from the list shows up properly and is draggable. Now I want to pass the following dict into the data object from flask so that I can render that instead.

The object when rendered with just {{ data }} looks like:

{u'uncategorized': [{'name': u''}, {'name': u'first'}, {'name': u'another'}]}

so you can see its about the same format as the object that gets passed into data:

{ list: [{ name: "John" }, { name: "Joao" }, { name: "Jean" }], list2: [{ name: "Juan" }, { name: "Edgard" }, { name: "Johnson" }] }

But when I try and just substitute in data: {{ data }} in the vue, it doesn't render properly.

So what do I have to do to the data object in flask to make Vue "accept" it?

I have a vuejs component that contains a form, I want to use the laravel old function so I'm able to repopulate the input fields if the form validation fails.

My guess would be I'd need to do something like pass the old function in as a prop to the component possibly but not sure if this is the 'right' way of doing it.

I'm just looking for confirmation on the best way of doing this.

I am new to VueJs and working on a small nutrition app. Currently, we want to make food recs based on certain nutrients.

The JS is as follows:

recommendFood: function() { this.recs = {}; var _this = this; var getItem = function(ndbno,i,nid) { _this.$http.get('http://127.0.0.1:3000/item?ndbno=' + ndbno).then(function(response) { var someData = response.body; var nutrients = someData.report.food.nutrients; var item = someData.report.food; item = this.addNutrientsToItem(item, nutrients); this.recs[nid].push(item); }); }; for (var i=0; i<this.low_nutrients.length; i++) { this.low_nutrients[i].recs = []; this.recs[this.low_nutrients[i].id] = []; for (var k=0; k<this.low_nutrients[i].food_map.length; k++) { var ndbno = this.low_nutrients[i].food_map[k]; getItem(ndbno,i,this.low_nutrients[i].id); } } console.log(this.recs) }

I want this.recs to be an object with attributes that are equivalent to a nutrient id (that we store). Each nutrient has a food_map array attached to the object that contains id's of foods that would be the recommendations. I need to send those id's (ndbno) to the http request to receive the object of that food recommendation (item).

The this.recs object actually populates correctly (despite there probably being a better way to write my code), however since it's waiting on the loop and promise, the html renders before the object is complete. Therefore, my html is blank. How can I display the recs on the html once they are updated on the promise result?

Here is my HTML:

<div v-for="(nutrient, idx) in low_nutrients"> <h2>{{nutrient.name}}</h2> <div>Recommended Foods:</div> <div> <div>Recs:</div> <div v-for="rec in recs[nutrient.id]">{{rec}}</div> </div> </div>

The desired object this.recs should look something like this (and it does show this in the console):

this.recs = { 291: [{},{},{}], 316: [{},{},{}] }

Is it possible to bind an HTML tag (element) to the value of a data or property in Vue 2?

I tried different syntaxes but couldn't get any to work, and googling didn't help.

Here are two of the syntaxes I tried:

Direct 'string' interpolation:

<{{ someProp ? 'button' : 'a' }}> <!-- Some complex template I want to keep DRY --> </{{ someProp ? 'button' : 'a' }}>

v-bind the tag on a template element (hopeful guess):

<template :tag="someProp ? 'button' : 'a'"> <!-- Some complex template I want to keep DRY --> </template >

If that's not possible, how can I avoid duplicating the content and attributes of the element just to change the associated HTML tag? What I want to avoid is:

<button v-if="someProp" /* Some attribute bindings */> <!-- Some complex template I want to keep DRY --> </button> <a v-else /* Repeating the above attribute bindings */> <!-- Repeating the above template, breaking the DRY principle --> </a>

Can someone help me on how to upload a file on pouchdb and display those uploaded files on page. I want to upload a file including name info of that file. When I check the fetch files using the console I can see [object object]. Am I doing the right thing? Any advice is well appreciated. Here is my code.

//Notes.vue // By the way Im using onsen ui for this <template> <v-ons-page> <v-ons-list> <v-ons-list-header>Auditing</v-ons-list-header> <v-ons-list-item v-for="note in notes"> <div class="left"> <img src="" alt=""> </div> <div class="center"> <span>{{ note._attachment['files'].data }} File here</span> </div> </v-ons-list-item> </v-ons-list> // Customize form for uploading file and info <v-ons-alert-dialog modifier="rowfooter" :visible.sync="dialogVisible" > <span slot="title">Create a Note</span> //File name of the file <v-ons-input float placeholder="Name of note" v-model="name" > </v-ons-input> // File <v-ons-input type="file" @change="onFileChange"></v-ons-input> <v-ons-button @click="addNotes(name)">Submit</v-ons-button> </v-ons-alert-dialog> </v-ons-page> </template>

//Here the methods for uploading and reading file uploaded

<script> import PouchDB from 'pouchdb' var db = new PouchDB('reviewerdb') export default { data() { return { dialogVisible: false, notes: [], file: '', name: '', path } }, mounted() { this.getNotes(); print('notes: ' + this.notes); },

//Methods just adding a desciption

methods: { onFileChange(event) { this.file = event.target.files[0]; }, addNotes() { db.put({ _id: 'notes', _attachments: { "file": { type: this.file.type, data: this.file } } }) }, getNotes() { db.get('notes', {attachments:true}).then(function (note) { this.notes = note; }); } } }

I have an object that looks like this, and I can push data using below method. Also I initialize the types data.

myObj = { 1: ["a", "b", "c"], 2: ["c", "d", "e"], } data: { types: {} }, methods: { pushValue(key, value) { var obj = this.types if (obj.hasOwnProperty(key)) { var idx = $.inArray(value, obj[key]); if (idx == -1) { obj[key].push([value]); } } else { this.$set(obj, key, [value]); } }, }

It works fine.

However, now I want my object to look like this:

myObj = { 1: { "a": [ [],[] ], "b": [ [],[] ], } }

How can I modify my append function to append the elements like this?

I am looking to format a column with a URL. The URL is something like this project/id. Is there any way to achieve this? The column that needs to formatted doesn't have the primary ID of the project which needs to be passed as the URL parameter.

The callback method has to be something like

projecturl( value, data ) { return '<a href="/project/data.id">value</a>'; }

I mainly require a Column Modifier that has a hyperlink like this: http://prntscr.com/g3yev4 rather than just plain text like this: http://prntscr.com/g3yefn

I'm creating a simple app to practice connecting Vue to an Express server. I have a form that I'm attempting to send to the back end, but I can't seem to get my data to the back-end. The error I'm receiving is:

POST http://localhost:8080/login 404 (Not Found)

My best guess is that the method in my Vue can't find a matching route on my server? If so, I'm confused as I have a route for login.

In my Vue script:

const axios = require('axios'); export default { data: function() { return { user: { email: '', password: '' } } }, methods: { sub() { var user = { email: this.user.email, password: this.user.password } axios.post('/login', user) .then(res => console.log(res)) .catch(err => console.log(err)) } } }

On by back-end:

const path = require('path'); const express = require('express'); const app = express(); app.use(express.static(path.join(__dirname, '..'))); app.post('/login', function(req, res) { console.log("Server HIT!!!!!!!!!!!!!!!!!!!!") }) app.get('*', function (req, res) { return res.sendFile('../index.html'); }); app.listen(3000); console.log('Express server listening on port 3000');

I seem to be having issues implementing Bounds with the https://github.com/xkjyeah/vue-google-maps package. Im trying to make sure all markers (even if there is only 1, centre is user latlong) are always inside the map viewport.

Excerpts below:

methods: { getMarkers() { let x = []; this.locations.forEach(function(item) { x.push({position: {lat:item.latitude, lng:item.longitude}, data: item}); }); this.markers = x; if(this.markers.length == 1) { this.locationData = this.markers[0].data; } } }, watch: { markers(markers) { const bounds = new google.maps.LatLngBounds() for (let m of markers) { bounds.extend(m.position) } this.$refs.gmap.$mapObject.fitBounds(bounds) } }, <gmap-map ref="gmap" class="map" :center="{lat:$store.state.latitude, lng:$store.state.longitude}" :zoom="zoom" :options="options" :scrollwheel="false" map-type-id="terrain" > <gmap-marker :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true" :draggable="false" @click="locationData = m.data" ></gmap-marker> </gmap-map>

If I console.log(bounds) I get

_.kd {f: id, b: bd} b:bd b:-2.4758634658720666 f:-2.443729561463897 __proto__:Object f:id b:53.117689120883 f:53.087672842818 __proto__:Object __proto__:Object

So it looks like Bounds is being set, but the map still has markers outside the viewport and it's not automatically resizing.

What am I doing wrong?

I need to get object properties change inside the array. For to do that, I'm using vue.$watch. I read the documentation but I didn't get that.

The scenario is:

... data() { return { Questions: [{foo: 1}, {foo: 2}, {foo: 3}] } }, ... this.$watch("Questions", function (newVal, oldVal) { // something... }, { deep: true });

See the example on JsFiddle

Here is my component:

<template> <div> {{serviceConfig.name}} </div> </template> <script> export default { props: ['serviceConfig'] } </script>

In my test, I am setting serviceConfig like this:

it(`should render serviceConfig`, () => { const Constructor = Vue.extend(TestMe2); const comp = new Constructor({ propsData: { serviceConfig: '{ "name": "Apple" }' } }).$mount(); expect(comp.serviceConfig).to.equal('{ "name": "Apple" }'); // successfull expect(comp.$el.textContent).to.contain('Apple'); // unsuccessfull });

However, if I change my template so that I am rendering {{serviceConfig}} instead of serviceConfig.name, it works, but not what I want (since I just want the name, i.e. 'Apple').

Please see the code

<div v-for="msg in leftMsg"> div v-if="msg.last_sender" @click.prevent="loadMsg(msg)"> <tr :class="['active',{ 'seens' : !msg.seen, 'selected':msg.isActive}]"> // some html </tr> </div> </div> loadMsg(obj){ obj.isActive = !obj.isActive; }

The problem is, it is adding selected class properly but when I click another item it adds selected but doesn't remove the old one. How can I keep only the most recent clicked item selected?

Thank you.

<template> <li v-for="r in recent"> {{r}} </li> </template>

recent is an array .

I don't want to list contents of recent from 0 to n-1 .

Instead i want to list it from n-1 to 0.

I tried ->

<template> <li v-for="r=recent.length-1 ; r>=0 ; r--"> {{r}} </li> </template>

But, it didn't work.

Simple task to pass data from one page to another made a real headache to newbie in Vue.js Here is my router

I'm rendering a form on "/" page, which make an API request,

and I just want to pass data to another route page with another component

Is it so hard to do in Vue? It made a real headache for me today. Get data from API, save & send to another component. How can I do it?

I'm trying to get data from a rest api using vue.js. But it's not working. It neither show response data nor showing error status. Can't figure it out what went wrong.

Here's my index.html

<html> <body> <script src="https://unpkg.com/vue"></script> <div id="app"> {{ message }} </div> <script> var url = "http://clients.itsd.com.bd/table-cartel/wp-json/wp/v2/categories"; var app = new Vue({ el: "#app", data: { message: "Hello!" }, methods: { work: function(){ alert(url); this.$http.get(url).then(function(response){ alert(response.data); this.message = response.data; }, function(error){ alert(error.statusText); }); } }, mounted: function(){ this.work(); } }); </script> </body> </html>

It's showing url, but not showing response.data or error.statusText.

I've got a question like in the title
How to stop mounting the component in <router-view> until receive a data from server or how to get the data before the component is mounted to <router-view>

My files:

1st main.js

new Vue({ el: '#app', router, components: { Login, Start }, data: function(){ return{ info: null, } }, methods:{ bef: function(){ this.$http.get('xxx').then(function(response){ return response.body }); } }, beforeMount(){ this.info= this.bef() } })

2nd component file Comp.vue

export default{ name: 'start', data(){ return{ } }, beforeMount(){ console.log(this.$parent.info) } }

how to do it properly to get not null value, but response from the server?
Thank you in advance

Since a while I'm stuck at the import function of my quiz generator application, because adm-zip cannot compress images properly.

Here is the errors that are returned for each images being uncompressed from the zip archive.

And here is the code involved in the compression of the archive, that is the component's method exportExecute() :

var AdmZip = require('adm-zip') var zip = new AdmZip() var uid = this.uid if (this.$parent.env === 'development') { zip.addLocalFile(this.$root.dbLocation) zip.addLocalFolder('app/dist/illustration', 'app/dist/illustration') } else { zip.addLocalFile(this.$root.dbLocation, 'resources/app/dist') zip.addLocalFolder('resources/app/dist/illustration', 'resources/app/dist/illustration') } zip.addFile('.token', uid) zip.writeZip(location) /** confirmation dialog */ dialog.showMessageBox({ title: 'Confirmation', message: 'La base de donnée a bien été exportée.', buttons: ['Ok'] })

The importExecute() method is not required here since it's properly working and the problem is the archive itself.

Also, I tried another zip compression module, but only in production it returned a pipe error, I never understood why it did that.

I'm stuck on this since a while and this is the last thing to be done in order to finish and release my app. Whoever helps me with this will be inserted in a credit.

Many thanks in advance.

I am making an online shop, which has two brands. Each of these brands contains 20+ products, which I want to display appropriately.

The urls work just fine when I enter a /single-product page from other pages, but if I hit refresh, essentially my first dynamic segment is discarded and replaced with the second one.

So if I enter this url in the adress bar (my website is in the folder /villebois):

http://localhost/villebois/wines/wine-brand1/my-awesome-single-wine

It's automatically replaced with this for some reason:

http://localhost/villebois/wines/my-awesome-single-wine

My routes looks like:

{ path: '/villebois/wines/:brand/:slug', component: SingleProduct, name: 'single-product' }, { path: '/villebois/wines/:brand', component: BrandContainer, name: 'single-brand' }

So the dynamic segment brand is overriden by slug. I am using Vue-router with the History API (note: if I use the default hash one, everything works perfectly)

Here is my .htaccess for configuring my server to serve index.php (I am using Wordpress) on every possible route:

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /villebois/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /villebois/index.php [L] </IfModule>

TL:DR If I directly enter a page with route with two dynamic segments using the History API, for some reason the first segment always gets replaced with the second. If I enter it from another page or use hash history, it works just fine.