Software

I'm testing my vuejs component and a very strange issue occurred.

Here is my test

import { mount } from 'avoriaz'; let wrapper = mount(MyComponent, { globals: {$route},}); it('the click changes the value of shown', () => { // This passes expect(wrapper.vm.shown).to.equal(false); // the click on this element will turn shown value into true wrapper.first('#my_link').trigger('click'); // the value of shown is indeed true now console.log(wrapper.vm.shown); // LOG LOG: true expect(wrapper.vm.shown).to.equal(true); // expected undefined to equal true });

What's happening and why shown is undefined when passed as argument to expect method and is boolean when displayed through console.log?

I have this code

displayGeneralTip (bool) { this.generalTip = bool } <div v-if="!generalTip" class="sm-exercise-tip sm-exercise-general-tip" @click="displayGeneralTip(true)"> <img src="~assets/exercises/bulb.svg" alt="Ampoule éteinte"> <span>Astuce</span> </div> <div v-if="generalTip" class="sm-exercise-block sm-exercise-general-tip-expand"> <div class="general-tip-bulb-icon"> <img src="~assets/exercises/lighted-bulb.svg" alt="Ampoule allumée"> </div> <div class="sm-exercise-block-tip">Some text</div> <div class="sm-exercise-hide-answer" @click="displayGeneralTip(false)"> <span>Masquer</span> <img src="~assets/exercises/eye.svg" alt="masquer"> </div> </div>

Initially, generalTip is set at false. When clicking on the first div to display text, It works fine. The first block disappear, and the second one appears.

But when clicking on the div to hide answer (sm-exercise-hide-answer), It triggers the method displayGeneralTip with bool false, but just after it triggers the same method with bool true. As if we clicked on the second div and the first one too.

I tried to put the div with text else where in my page, and it works fine. The problem appears when the two divs must be on the same place on the page

Anyone had this problem ?

I'm brand new to Vue and have been struggling with this all day. I am trying to build a table using Vue components that can allow users to add and remove rows.

The problem I'm having is the removeRow() fuction is not removing the selected row, it's removing the last row off the table. Can anyone help me out?

Vue.component('newtemplate', { template: `<div> <div> <button class="button btn-xs btn-success" @click="addRow">+</button> </div> <table> <thead> <tr> <th class="col-lg-6 nopadding"><input type="text" value="Col 1" class="borderless nopadding col-lg-6"></th> <th class="col-lg-2 nopadding"><input type="text" value="Col 2" class="borderless nopadding col-lg-12"></th> <th class="col-lg-2 nopadding"><input type="text" value="Col 3" class="borderless nopadding col-lg-12"></th> <th class="col-lg-2 nopadding"><input type="text" value="Col 4" class="borderless nopadding col-lg-12"></th> </tr> </thead> <tbody> <tr v-for="(row, index) in rows" :row="row"> <td> <input type="text" class="form-control nopadding text-center"> </td> <td> <input type="text" class="form-control nopadding text-center"> </td> <td> <input type="text" class="form-control nopadding text-center"> </td> <td> <input type="text" class="form-control nopadding text-center"> </td> <td> <button type="button" class="text-center button btn-xs btn-danger" v-on:click="removeRow(index)">-</button> </td> </tr> </tbody> </table> </div>`, data: function() { return { rows: [{row: ""}] } }, methods:{ addRow(){ this.rows.push({row: ''}); }, removeRow: function(index) { this.rows.splice(index, 1); } } });

I am trying to run the vue-hackernews-2.0 example from vuejs' github repository

In setup section it explains how to install the project:

# install dependencies npm install # or yarn # serve in dev mode, with hot reload at localhost:8080 npm run dev # build for production npm run build # serve in production mode npm start

I did npm install. After changing the port to 8888 in server.js I typed "npm run dev" on command line.

> vue-hackernews-2.0@ dev D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master > node server server started at localhost:8888 DONE Compiled successfully in 16328ms 1:02:18 PM DONE Compiled successfully in 17845ms 1:02:19 PM webpack built bd162a76119031a85eed in 17845ms

When I go localhost:8888 It will just try to load for 1 min and then it fails, without anything on the console.

I thought I should also try "npm run build" and "npm start" so I also used two commands. "npm run build" successfully created the dist file.

But after "npm start" I get this error:

> vue-hackernews-2.0@ start D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master > cross-env NODE_ENV=production node server module.js:471 throw err; ^ Error: Cannot find module './dist/vue-ssr-server-bundle.json' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\server.js:41:18) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) events.js:160 throw er; // Unhandled 'error' event ^ Error: spawn node ENOENT at notFoundError (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:11:11) at verifyENOENT (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:46:16) at ChildProcess.cp.emit (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:33:19) at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12) npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\Users\\212399486\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start" npm ERR! node v6.11.2 npm ERR! npm v3.10.8 npm ERR! code ELIFECYCLE npm ERR! vue-hackernews-2.0@ start: `cross-env NODE_ENV=production node server` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vue-hackernews-2.0@ start script 'cross-env NODE_ENV=production node server'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the vue-hackernews-2.0 package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! cross-env NODE_ENV=production node server npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs vue-hackernews-2.0 npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls vue-hackernews-2.0 npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\npm-debug.log

Screenshot of dist folder:

package.json scripts:

"scripts": { "dev": "node server", "start": "cross-env NODE_ENV=production node server", "build": "rimraf dist && npm run build:client && npm run build:server", "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules", "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules" },

I'm currently in the process of building a CMS using Laravel and Vue JS which build forms dynamically based on an array of data created in the Laravel model. Here is an example:

class TheBuilding extends Model { protected $fillable = [...]; public function formFields(){ $fields = [ [ 'label' => 'Title', 'name' => 'title', 'component' => 'input_text' ], [ 'label' => 'Content', 'name' => 'content', 'component' => 'input_textarea' ], [ 'label' => 'Main Image', 'name' => 'main_image', 'component' => 'input_single_upload' ], [ 'label' => 'Gallery', 'name' => 'gallery', 'component' => 'input_multiple_upload', 'meta' => [ [ 'type' => 'text', 'name' => 'caption', 'label' => 'Caption' ] ] ], ]; return $fields; } }

Basically this array gets passed into Vue JS and parsed to dynamically display Vue JS form components accordingly. This has been working great but I've come across an interesting issue with the Gallery multiple upload component which needs the ability to assign captions to images.

To fast forward a bit, I'm at the point where I have an array of uploaded files which get iterated through and displayed on the page, and then I have the input textfield for the caption underneath.

Here's my component (edited to show the relevant bits):

<template> <div class="row"> <div v-for="(file, i) in files"> <img :src="file.file" > <div v-for="meta in file.meta"> <input v-if="meta.type == 'text'" type="text" v-model="meta.value"> </div> </div> </div> </template> <script> export default{ computed:{ files(){ let uploads = []; /*this.uploaded is just an array of filenames*/ this.uploaded.forEach((file, i) => { let createdMeta = [ { name:"caption", type:"text", value:'' } ]; uploads.push({file,meta:createdMeta}); }); return uploads; } }, props:{ ... }, mounted(){ //CODE THAT HANDLES DROPZONE UPLOAD }, name: 'InputMultipleUpload', data(){ return { showUploadProgress:true, } } } </script>

The bit I'm focusing on is:

let createdMeta = [{ name:"caption", type:"text", value:'' }];

You'll notice here that I've created that array statically. If I do that, when I type in a caption textbox everything works fine and the caption value gets updated dynamically by v-model as expected. Essentially, I get the desired result and everything is good.

However, if I try and set this this dynamically from the created model ie:

let createdMeta = formFields;

where formFields is the reference to the model array, when I then type in the textbox it updates all other textboxes and values in the files array created. V-Model no longer seems to relate to the specific textbox.

So I guess the question I'm asking is:

a) Why is it behaving that way when I passed in the referenced array

b) Why does it work fine if I just manually create that array?

c) How can I get A to behave like B?

Thanks everyone, happy to clarify anything. I assume i'm missing a piece in the reactivity puzzle.

Cheers, Lew

I have various .js functions calculating order sub-totals, tax, and final total price in a modal. The calculations are correct, but the variables don't seem to be cleared on modal exit/modal pop-up. This means that every modal past the first one simply adds their (correct) calculations to the previous ones, rather than starting from zero as I'm trying to make it do.

I've set breakpoints in the .js source, and it tells me that the .js numbers are the one's not zeroing even when there is a set to zero on them right after the number is passed back.

Here is a picture set of the first and second modal call to illustrate this issue (bottom right numbers on both):

Here is my html, in case it's actually a tag-based issue:

@{ ViewData["Title"] = "Index"; Layout = "~/Views/_Layout.cshtml"; } <div class="col-sm-3">&nbsp;</div> <div class="panel col-sm-6 col-xs-12"> <div class="panel-title text-center" style="padding-top:20px;"> <h3 style="font-weight:bolder">Cart Contents</h3> <img src="/img/cart.png" style="height:10%;width:10%;padding-bottom:5%;" /> </div> <div class="text-center" style="padding-top:10px;"> @{ Dictionary<string, object> cart = Context.Session.Get<Dictionary<string, Object>>("cart"); decimal itemSubTotal = 0; decimal subTotal = 0; decimal itemTaxTotal = 0; decimal taxTotal = 0; decimal salesTaxRate = 0.13M; //m required for a literal decimal orderTotal = 0; } <table class="table table-striped"> <tr style="font-weight:bolder;"> <th class="col-xs-2 text-center">Product Code</th> <th class="col-xs-2 text-center">Qty</th> <th class="col-xs-2 text-center">Item Name</th> <th class="col-xs-2 text-center">Price</th> </tr> @{ if (cart != null) { foreach (var key in cart.Keys) { ProductViewModel item = JsonConvert.DeserializeObject <ProductViewModel> (Convert.ToString(cart[key])); if (item.Qty > 0) { subTotal += item.MSRP * item.Qty; <tr> <td class="col-xs-2 text-center">@item.Id</td> <td class="col-xs-2 text-center">@item.Qty</td> <td class="col-xs-2 text-left">@item.ProductName</td> <td class="col-xs-2 text-center">@string.Format("{0:C}", @item.MSRP)</td> </tr> } } taxTotal += Decimal.Multiply(subTotal, salesTaxRate); orderTotal += subTotal + taxTotal; } } </table> <hr /> <table class="table table-striped"> <tr> <th colspan="4" class="col-xs-4 text-left" style="font-size:large;font-weight:bold;"> Cart Totals </th> </tr> <tr> <td class="col-xs-2 text-right">Subtotal: </td> <td class="col-xs-4 text-left" id="subtotal">@string.Format("{0:C}", @subTotal)</td> </tr> <tr> <td class="col-xs-2 text-right">Tax Total: </td> <td class="col-xs-4 text-left" id="taxtotal">@string.Format("{0:C}", @taxTotal)</td> </tr> <tr> <td class="col-xs-2 text-right">Order Total: </td> <td class="col-xs-4 text-left" id="ordertotal">@string.Format("{0:C}", @orderTotal)</td> </tr> @{ @subTotal = 0; @taxTotal = 0; @orderTotal = 0; } </table> <div class="text-center"> <form asp-controller="Cart" asp-action="AddCart" method="post" role="form"> @if (Context.Session.GetString(SessionVars.User) != null) { <button type="submit" class="btn btn-sm btn-primary" id="modalbtn">Add Cart</button> } &nbsp;<a href="/Cart/ClearCart" class="btn btn-sm btn-success">Clear Cart</a> </form> </div> </div> </div>

And here is the .js file where the calculations are being done:

var link = '/GetOrders'; var detailslink = '/GetOrderDetails/'; var subtotal = 0; var finalPrice = 0; var taxAmount = 0; // register modal component Vue.component('modal', { template: '#modal-template', props: { item: {}, modalItem: {}, details: [] }, }) new Vue({ el: '#orders', methods: { GetOrders: function () { var self = this axios.get(link).then(function (response) { self.orders = response.data; }, function (error) { console.log(error.statusText); }); }, loadAndShowModal: function () { var self = this axios.get(detailslink + this.modalItem.id).then(function (response) { self.details = response.data; self.showModal = true; }, function (error) { console.log(error.statusText); }); }, }, mounted: function () { this.GetOrders(); }, data: { orders: [], showModal: false, modalItem: {}, details: [] } }); function formatDate(date) { var d; if (date === undefined) { d = new Date(); //no date coming from server } else { var d = new Date(Date.parse(date)); // date from server } var _day = d.getDate(); var _month = d.getMonth() + 1; var _year = d.getFullYear(); var _hour = d.getHours(); var _min = d.getMinutes(); if (_min < 10) { _min = "0" + _min; } return _year + "-" + _month + "-" + _day + " " + _hour + ":" + _min; } function calcLinePrice(qtySold, msrp) { var linePrice = qtySold * msrp; subtotal += linePrice; finalPrice += linePrice; return linePrice.toFixed(2); finalPrice = 0; subtotal = 0; } function calcSubtotal() { return subtotal.toFixed(2); subtotal = 0; finalPrice = 0; subtotal = 0; } function calcTax() { taxAmount = finalPrice * 0.13 return taxAmount.toFixed(2); taxAmount = 0; } function calcFinalPrice() { var total = 0; total = finalPrice + taxAmount; return total.toFixed(2); finalPrice = 0; subtotal = 0; }

As you can see, I'm zeroing the finalTotal and subtotal in every calculation in an attempt to figure this out. It seems that no matter what I do, they refuse to zero on anything but page reload. Any help?

I am working on a project and am struggling with redirecting to intended location after login. The problem is that Laravel does not include Vues route (anything after #/...) so it always redirects me only to 'domain.com/'

I am using laravel routing only for 'login' 'logout' and '/' and rest of the app is single page utilizing vue routing.

Users of the app are receiving notification emails when they need to take action. Those email contain links to requests where their action is required (e.g. domain.com/#/request/3413). Of course they need to login to be able to access that so they are redirected to login page by laravel (domain.com/login#/request/3413)

After successful login I am trying to redirect them with

return redirect()->intended('/');

But it redirects them to 'domain.com/' instead of 'domain.com/#/request/3413'

Is there any way to make laravel include vues route in that redirect?

Thanks a lot!

Html:

Select box:1

<select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control"> <option v-for="availability in availableFacilities" v-bind:value="availability">{{availability.label}}--</option> </select>

Click Events:

<a @click="removeFacilities" class="btn btn-default remove_option" rel="facilities2" id="remove"><i class="fa fa-arrow-left"></i></a> <a @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add"><i class="fa fa-arrow-right"></i></a>

Select Box:2

<select name="facilities" multiple="multiple" id="facilities2" size="4" class="form-control"> <option v-for="facility in selectedFacilities" v-bind:value="facility.value">{{facility.label}}</option> </select>

And the script was,

export default { data(){ return{ facilitySelected:[], availableFacilities: [{ value: 1, label: 'Double (Non a/c)' }, { value: 2, label: 'Premium Double (a/c)' }, { value: 3, label: 'Standard Double (a/c)' } ], selectedFacilities: [], } }, methods:{ addFacilities() { this.selectedFacilities = this.facilitySelected.concat(this.selectedFacilities); }, removeFacilities() { }, } }

Here i have two select boxes with click events in between, I have assigned the values to the variable to the first select box option. My requirement is when i select a option from first select box and click over the addFacilities click event, the data in that particular option should be moved to second select box and when i select option in second select box and click over removeFacilities, the data needs to move to first select box.

For adding first to second i tried with,

addFacilities() { this.selectedFacilities = this.facilitySelected.concat(this.selectedFacilities); },

It moving the data to second select box but that data still remaining in first select box, how should i remove this duplication and here i am using concat to add the data. If i select the option and click addFacilities, that option should be removed from the first select box and vice versa for removeFacilities also.

I am using google maps API, and have created a Component to display the map.

index.html:

<!DOCTYPE html> <html> <head> ... </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script> function initMap() { console.log('map loaded'); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap" type="text/javascript"></script> </body> </html>

GoogleMap.vue:

<template> <div class="google_map" :id="map_name"></div> </template> <script> export default { name: 'google_map', props: ['map_id'], data() { return { map_name: this.map_id + '-map', } }, methods: { create_map() { const element = document.getElementById(this.map_name); const options = { zoom: 14, center: new google.maps.LatLng(51.501527, -0.1921837) }; const map = new google.maps.Map(element, options); const position = new google.maps.LatLng(51.501527, -0.1921837); const marker = new google.maps.Marker({ position, map }); } }, mounted() { this.create_map(); } } </script>

The problem is, the component is rendered before the google maps API is loaded. How can I display after the google maps API has been loaded?

New to Vue.js 2. I am trying to give each div their own unique style in a v-for loop. What am I doing wrong? What is a better way to accomplish what i'm trying to do?

var tables = new Vue({ el: '#table', data: { tables: [ {name: 'iPhone', left:1, top:0}, {name: 'Mac', left:150, top:0} ] } }) .table-div { width:100px; height: 100px; border:1px solid black; position: absolute; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="table"> <div v-for="table in tables"> <div class="table-div" v-bind:style="{top: table.top, left: table.left}">{{table.name}}</div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </body> </html>

Html:

<select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control"> <option value="1">Double (Non a/c)</option> <option value="2">Premium Double (a/c)</option> <option value="3">Standard Double (a/c)</option> </select>

Click event:

<a @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add"><i class="fa fa-arrow-right"></i></a>

Script:

export default { data(){ return{ facilitySelected:[] } } methods: { addFacilities() { this.facilitySelected; console.log(this.facilitySelected); } } }

Here i have a list of select with options, When i click on the addFacilities, the value of the selected option only making as output in console.log, i need to have both value as well as the text in the option to be come out through console.log.. How to get both the value and the text when i click on the addFacilities?

I have an html code like this in vuejs:

<img v-if="shouldBePrinted(tag)" src="someimage.jpg">

I would like to pass the tag itself (img) to the function shouldBePrinted to determine if it should be showed.

Is there any way to do this?

I tried with a ref like this but, in this case, I would like to avoid it:

<img ref="imgRef" v-if="shouldBePrinted(this.$refs.imgRef)" src="someimage.jpg">

I have an object that contains user names in this structure:

clients: { 1: { first_name:"John" last_name:"Doe" middle_name:"A" }, 1: { first_name:"Jenny" last_name:"Doe" }, }

I want to loop though them in a select input as options

<option v-for="(value, client, index) in clients" :value="">{{ value }}</option>

I came until here, but I couldn't figure out how to organize the string properly. Maybe, is there a way to parse it in computed properties so I can have room to put code?

If I could use something like this, I think it would work, but couldn't figure out how to do it like this either.

computed:{ clientNameOptions() { for (const key of Object.keys(this.clients)) { return `<option value="` + this.clients[key].first_name + ' ' + this.clients[key].middle_name + ' ' + this.clients[key].last_name + `"></option>` } } }

What is the proper way of achieving it?

I need to change the text within a specific component's textarea when requirements are met from entering text into a different components textarea. I've tried to create a simple example to show the issue. my main issue is targeting the correct component and editing its text that shows up dynamically.

Parent Component

<template> <reuseableComponent input-type="textarea" v-model="Example1"> </reuseableComponent> <reuseableComponent input-type="textarea" v-model="Example2"> </reuseableComponent> <template>

Reuseable Component

<textarea v-model='taValue' @input='$emit("input", taValue)'> </textarea> exampleMethod() { if(value) { //change text in Example2 textarea instance. } }

I'm creating a CMS with Vue.js for studying purposes.

I have a list of posts that load into the selectedPost object when I click the title. This selectedPost object is bound to a form, an "edit" form. Now when I start editing the form, all changes sync to the selectedPost (and the list of posts) in real time, which is pretty neat, but I would like to have the regular form, in which the user has to click 'submit' to sync changes.

How to do that using vue? Can a bound object sync only on command?

Im having some problems with my data getting loaded even if the component is not in the current view I have a list with 500 elements, which is why each component should only load it's data when scrolled to the element is the list...

• Im using this mixin:-

https://github.com/BKWLD/vue-in-viewport-mixin When the component is mounted, then I have a watcher to see if the current component is in the view, however, doesn't quite seem to work quite as I hoped, or maybe im using it wrong.

Either way, no matter what it calls my function this.loadDataToSystem(); even if the component is not in the current view. What I want is to only call the function when I've scrolled to the component...

The component looks is this:-

<template> <div> <template v-if="elementIsVisible"> <div class="grid-tile__content" :class="{ 'is-alarm': system.pending_events === 'alarm', 'is-acknowledged-alarm': system.pending_events === 'alarm-acked', 'is-warning': system.pending_events === 'warning', 'is-info': system.pending_events === 'event', 'is-offline': system.status === 'Offline', 'is-online': system.status === 'Online'}"> <h2 class="grid-tile__system-name"> <span>{{system.name}}</span> </h2> <p class="grid-tile__unit-name">System Pressure</p> <div class="grid-tile__content__loading" v-if="loading"> <loading></loading> </div> <div v-else> <div class="grid-tile__footer"> <div class="grid-tile__chart-info"> <span class="grid-tile__chart-number"> <template v-if="system.last_value !== ''">{{system.last_value}}</template> <template v-else>N/A</template> </span> <span class="grid-tile__chart-unit"> <template v-if="system.unit.length > 0"> {{system.unit}} </template> <template v-else> N/A </template> </span> <!--span class="grid-tile__chart-prev-number">3.34%</span--> </div> <div class="grid-tile__notification"> <span class="grid-tile__notification-circle"></span> <span>02.aug / 09:34am</span> </div> </div> </div> </div> </template> </div> </template> <script> import SystemService from '../../../../Api/Systems'; import Loading from '../../../../Icons/AltenateLoader.vue'; import inViewport from 'vue-in-viewport-mixin'; export default { props: ['systemData', 'startDate', 'endDate', 'frequency'], mixins: [ inViewport ], watch: { 'inViewport.now': function(visible) { if(visible) { this.loadDataToSystem(); //This should only be triggered if the user has scrolled to the component- So if the component is in the current view this.elementIsVisible = true; } else { this.elementIsVisible = false; } } }, data() { return { endpointConf: { start: this.startDate, end: this.endDate, frequency: this.frequency }, system: { status: '', pending_events: '', name: this.systemData.name, last_online: '', unit:'', y_max_value: '', y_min_value: '', last_value: '' }, data: this.systemData, loading: true, elementIsVisible: false } }, components: { Loading }, methods: { loadDataToSystem() { SystemService.getSystem(this.data.id).then(response => { if(response.status === 200) { console.log("load data"); } }).catch((error) => { console.log("Fejl:" + error); }); } }, created() { } } </script>

I have a textbox bound to a Vue.js object, like this:

<textarea id="post-content-textarea" v-model="selectedPost.content" v-bind:value="selectedPost.content"></textarea>

I want to programatically change the content of this textarea with jquery, like this:

$('#post-content-textarea').val("New Value");

But it is not updating the bound js object (only if I manually type on the textarea), so I tried triggering the "change" and "input" events, without success. My question: Which event should I trigger to make it update the object?

I'm trying to learn Vuex and tried adding the mapState with local computed property in my Vuejs 2.0 application on top of Laravel 5.4, now while adding so I'm getting following error:

Syntax Error: Unexpected token, expected , (379:32) 377 | }, 378 | mapState({ > 379 | contactStore: state => state.contactStore | ^ 380 | }) 381 | } 382 | }

Here is my component:

<template> <div class="row"> <div class="table-responsive"> <table class="table table-striped"> <tbody> <tr> <th class="text-left">Contact Name</th> <th class="text-left">Company Name</th> <th class="text-left">City</th> <th class="text-left">Email</th> <th class="text-left">Mobile</th> <th class="text-left">Type</th> <th class="text-left">SubType</th> <th class="text-left">Profile</th> </tr> <tr v-for="(item, index) in tableFilter"> <td class="text-left"><a @click="showModal(item)" data-toggle="modal" data-target="#showContactModal">{{ item.first_name+' '+item.last_name }}</a></td> <td class="text-left">{{ item.company.name }}</td> <td class="text-left">{{ item.city }}</td> <td class="text-left">{{ item.email }}</td> <td class="text-left">{{ item.mobile }}</td> <td class="text-left"><span class="badge badge-info">{{ item.company.type }}</span></td> <td class="text-left"><span class="badge badge-info">{{ item.company.sub_type }}</span></td> <td class="text-left"><span class="badge badge-info">{{ item.profile }}</span></td> </tr> </tbody> </table> </div> </div> </template> <script> import {mapState} from 'vuex' export default { data(){ return { id: '', search: '', model: [] } }, computed: { tableFilter: function () { const searchTerm = this.search.toLowerCase(); if(this.model) { return this.model.filter((item) => (item.first_name.toLowerCase().includes(searchTerm) || (item.last_name !==null && item.last_name.toLowerCase().includes(searchTerm)) || (item.company.name !==null && item.company.name.toLowerCase().includes(searchTerm)) ); } }, mapState({ contactStore: state => state.contactStore }) } } </script>

I'm trying to replace table filter computed property with the current contact_list state, how can I achieve this or I'm doing some mistake, even if I do ...mapState({}) it is showing me same type of error:

Syntax Error: Unexpected token (378:8) 376 | } 377 | }, > 378 | ...mapState({ | ^ 379 | contactStore: state => state.contactStore 380 | }) 381 | }

what can be done guide me. Thanks

I have the following element:

<input type="text" v-model="selectedPost.title" v-bind:value="selectedPost.title">

and I have the following Vue.js app:

var vueapp = new Vue({ el: '#app', data: { selectedPost: {} } });

When I type something on the input, the Vue model is updated, I can see it unning this on my browser console:

vueapp.$data.selectedPost.title

Returns the value typed in the textbox. All good.

But.. when I do this:

vueapp.$data.selectedPost.title = "changed";

The textbox does not update with the assigned value.

Why? How to make it work?

I can't figure out how to change the default font in vuetify. I've been looking for the right variable within ./node_modules/vuetify, but I can't locate it.

I'd ideally not make any changes in the module, but would rather override such variables from outside the module.