[Vue.js] Vue.js subcomponent not reacting under nested SVG Subscribe to RSS

there is an SVG diagram in a Vue.js template with nested drawn circles symbolizing doors. When the doors are OPEN the stroke/fill color should be GREEN; & when CLOSED the stroke/fill color should be RED. When my R/T data arrives (i.e. to SignalR client plug-in). I need to set the state & compute the colors, which when doing, but the colors are not getting redrawn. Any suggestions? when using Vue.js 2.9.6.
Thank you

there is tried computed properties as well as watches. The data() fields are updating but the bound colors are not reacting.

In the template

</svg>

</div>

I need to get the drawing to rerender every update cycle with data from SignalR Client. Note: my SignalR Client & Vue.js plug-in are working fine. Something seems to be amiss with Vue.js’ reactivity here.

Solution :

How about adding key to component that you want redrawn ? With some properties you want to force redraw and changing the key o that component. For example

<template>
<div :key=”updateCounter” >
{someContent}
</div>
</template>
<script>
export default {

data() {
return {
updateCounter: 0
};
},
computed: {
valueToWatch() {some dynamic value}
},
watch: {
valueToWatch() {
this.updateCounter += 1
}
}
</script>

Here is great article about forcefully rerendering
The correct way to force vue.js to re-render a component

[Vue.js] How to loop through an array and add a property to all objects in vue.js Subscribe to RSS

In Vue.js, in order to add a property/array item to something already in the virtual DOM, you have to use the $set function.

Here’s are the wrong ways:
Object: this.myObject.newProperty = “value”;
Array: this.myArray[3] = object;

Here’s the right way:
Object: this.$set(this.myObject, “newProperty”, “value”);
Array: this.$set(this.myArray, 3, object);

My question is how do you $set a property of all objects in an array?

Here’s the wrong way:

for (var i = 0; i < this.myArray.length; i++) {
this.myArray[i].newProperty = “value”;
}

So, what’s the method for me to use $set to do this?

Solution :

A bit tweaked code of yours works:

new Vue({
el: “#app”,
data: {
todos: [{
text: “Learn JavaScript”,
done: false
},
{
text: “Learn Vue”,
done: false
},
{
text: “Play around in JSFiddle”,
done: true
},
{
text: “Build something awesome”,
done: true
}
]
},
methods: {
toggle: function(todo) {
todo.done = !todo.done
},
changeProperty1() {
const val = ‘A’
// this is the code a bit modified
// defining length (and using it in the comparison) is a
// bit of optimization, not required
for (var i = 0, length = this.todos.length; i < length; i++) {
this.$set(this.todos[i], ‘property1’, val);
}
},
changeProperty1Again() {
for (todo of this.todos) {
if (todo.property1) {
todo.property1 = ‘B’
}
}
}
},
created() {

}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}

#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}

li {
margin: 8px 0;
}

h2 {
font-weight: bold;
margin-bottom: 15px;
}

del {
color: rgba(0, 0, 0, 0.3);
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id=”app”>
<h2>Todos:</h2>
<ol>
<li v-for=”todo in todos”>
<label>
<input type=”checkbox”
v-on:change=”toggle(todo)”
v-bind:checked=”todo.done”>

<del v-if=”todo.done”>
{ todo.text }
</del>
<span v-else>
{ todo.text }
</span>
<span>
{ todo.property1 }
</span>
</label>
</li>
</ol>
<button @click=”changeProperty1”>Click this first</button>
<button @click=”changeProperty1Again”>Click this second</button>
</div>

Sorry for the lengthy snippet, I just copied it over from JSFiddle :)

Solution 2:

You keep doing this.$set(this.myArray, 3, object); in a loop using the index.
Something like this after modifying the object.

var newObject = Object.assign({}, this.myArray[i], {newProperty: ‘value’} ); // Immutable object created
this.$set(this.myArray, i, newObject);

This will be inefficient as it will call $set for each iteration.
so you can do a map on the array and return a new Object from inside.

const newArray = myArray.map(object => {
return Object.assign({}, object, {newProperty: ‘value’} );
//or by ES6 spread operator
return {…object, newProperty: ‘value’};
});

Then set the array for Vuejs to re-render.

Hope, this will give the idea. Although context(this) may vary depending on how you’re implementing!

Solution 3:

You simply just wanna add a new property to objects in an array. Not set a new value to the array by their index. You can do the following:

new Vue({
el: ‘#demo’,
data: {
myArray: [
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 5}
]
},
methods: {
addProperties() {
for (var i = 0; i < this.myArray.length; i++) {
this.$set(this.myArray[i], ‘newProperty’, 5 - i)
}
}
}
});
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”demo”>
<div v-for=”item in myArray” :key=”item.id”>
<span>{item.id}: </span>
<span v-if=”item.newProperty”>{item.newProperty}</span>
</div>
<button @click=”addProperties”>Add Properties</button>
</div>

Solution 4:

Not really a vue.js thing - just plain JS:

arr.map(obj => { return {…obj, newProperty: “sameValueAsOthers”});

[Vue.js] create global filter functions that all consumes same api and use it in different components VUE.js Subscribe to RSS

when very much confused about this. Trying to create global filter functions that consumes same api and filter it. Really confused how to achieve. To make myself more clear here an example:

with vuex getters when feeding my list and map components in home page.

Code UPDATED

home component:

data(){
return {
keyword: “”
price: “”
};
},
mounted(){
this.$store.dispatch(“loadCars”);
},
computed: {
loadApi(){
return this.$store.getters.loadCars;
},
cars(){
let filter = this.loadApi.filter(textFilter(this.keyword));
return filter;
}
}

Now to filter cars getters. But not the local way. Trying to do globally. So I created mixins/textfilter.js and pricefilter.js and exporting those…

export const textFilter = (text) => (car) => {
if (text > 0) {
if (
car.name.match(text) ||
car.color.match(text)
) {
return true;
} else {
return false;
}
} else {
return true;
}
};

And trying to make event from filter-component to update keyword…

export default {
data(){
return {

};
},
}

Now the problem here. How can I handle event (event-bus or etc) and filter the cars object in home.vue

Solution :

CODESANDBOX example: https://codesandbox.io/s/vue-template-4m9c2

this should work…

import { textFilter } from “../../mixins/textFilter.js”;
import { priceFilter } from “../../mixins/priceFilter.js”;

export default {
computed: {
allCars(){
return this.$store.getters.cars;
},
volvos() {
return this.allCars.filter(textFilter(‘volvo’));
}
}
};

just note that you also have some issues in the text filter.

try this curried function instead

export const textFilter = (text) => (car) => {
if (text.length > 0) {
if (
car.name.match(text) ||
car.color.match(text) ||
car.price.match(text)
) {
return true;
} else {
return false;
}
} else {
return true;
}
};

To make it even more globally accessible and unique, you could move the filter into the vuex getter like this:

// store.js
import { textFilter } from “@/mixins/textFilter.js”;
const store = new Vuex.Store({
state: {
cars: [
{ name: “Volvo s40”, color: ‘…’, price: ‘…’},
{ name: “Volvo v70r”, color: ‘…’, price: ‘…’},
],
textFilterString: ‘volvo’
},
getters: {
filteredCars: state => {
return state.cars.filter(textFilter(state.textFilterString))
}
}
})

this will require additional action and methods to manage the textFilterString variable, but then you can get the filtered list from anywhere without any duplication or recalculation unless the data or the filter string changes.

Solution 2:

I would suggest you to create mixins whenever you want to have some filter which can be easily accessible to any component.

Mixins Learn more about it on Official Docs

You just need to create a mixin say - filtersMixins.js. Then import it to the component.

In the mixin file you can export all the extra vue.js instance properties to the component like methods

In filtersMixins.js

export const myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log(‘hello from mixin!’)
}
}
}

In the component

import { myMixin } from ‘./mixins/filtersMixins’

Now in the inside the instance, call it simply

var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
},
mixins: [myMixin]
})

Now, In the component you can simply use it like a vue.js property by referring this Like methods. You can call mixin methods hello by this.hello()

Pros - You can write common methods in the mixins file and you can have the component binded to the method means you can use the component this to the mixins methods

In case you want to have global method which does not need to be binded to component.

Create it in same file and simply export it

export const globalFilter = str => {
return str.split(‘’)
}

and use it anywhere by

import { globalFilter } from ‘./mixins/filtersMixins’

[Vue.js] How to use props and watch in vue? Subscribe to RSS

when a beginner with VueJS and I use vue-chessboard library for my project. But when so confuse about the way to use of the library, I see that when we use showThreats, then we can use “:showThreats”, but we do not use “:” for “orientation”. There are code of vue-chessboard:

vue-chessboard

export default {
name: ‘chessboard’,
props: {
…,
showThreats: {
type: Boolean,
default: false,
},
onPromotion: {
type: Function,
default: () => ‘q’,
},
orientation: {
type: String,
default: ‘white’,
},
},
watch: {
fen: function (newFen) {
this.fen = newFen
this.loadPosition()
},
orientation: function (orientation) {
console.log(‘watch orientation________‘, orientation)
this.orientation = orientation
this.loadPosition()
},
showThreats: function (st) {
this.showThreats = st
if (this.showThreats) {
this.paintThreats()
}
},
},
methods: {…
}
}

when I use this library

Then the browser will notice:
vue.runtime.esm.js?2b0e:619 [vue.js warn]: Property or method “black” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
And there is no happen if I use:

But with the showThreats, the document give that:

I can not understand why? Thank you for helping me ^^

Solution :

When you use :some-property, that is a shorthand for v-bind:some-property which means it will bind a variable to that component from parent (two way data binding which is explained in documentation). When you use it without “:” it will only pass a string to that component. So when you pass :orientation=”black” it expects that you have variable named black inside parent component. If You write :orientation=”‘black’” in that case it would only pass a string, but it is easier to write just orientation=”black”.

[Vue.js] Checkboxes in Bootstrap 4 Dropdown (opened with vue.js) not checkable Subscribe to RSS

I open a Bootstrap Dropdown[1] with Vue.js. The Dropdown contains some custom checkboxes that I’m not able to select.

I read about event.stopPropagation() and how this could be the culprit, but I couldn’t figure out where to place it.
How can I make this work?[2]

here is a jsfiddle https://jsfiddle.net/b7yskLw6/6/

Here is the minimal HTML:

<div class=”dropdown”>
<button class=”dropdown-toggle” @click=”toggleDropdown($event)” type=”button” id=”dropdownMenuButton” data-toggle=”dropdown”>
Composers
</button>
<div class=”dropdown-menu”>
<ul>
<li v-for=”composer in composers”>
<div class=”custom-control custom-checkbox”>
<input @change=”assignComposer($event)” type=”checkbox” class=”custom-control-input” :id=”composer”>
<label class=”custom-control-label” :for=”composer”>{composer}</label>
</div>
</li>
</ul>
</div>
</div>

And the JS:

var app = new Vue({
el: ‘#app’,
data: {

composers:[
‘liane Radigue’,
‘Laurie Spiegel’,
‘Maryanne Amacher’
]

},
methods: {
toggleDropdown: function(event){
$(event.target.parentElement).dropdown(‘toggle’);
},
assignComposer: function(event){
console.log(event)
}
},
created: function(){
// closing the dropdown from outside….
var self = this;
window.addEventListener(‘click’, function (e)
{

if (!$(e.target).parents(‘.dropdown’).length)
{
$(‘.dropdown’).dropdown(‘hide’);
}else{
e.stopPropagation();
}
});
},
});

[1] https://getbootstrap.com/docs/4.3/components/dropdowns/

[2] I know, jQuery+vue.js is bad, but that’s what I got and at the end it’s all “just” javascript…

Solution :

In this case the event.stopPropagation() should be used on the dropdown click event.

Using the Vuejs event modifiers you can just edit the code in this way:

Here’s the working jsfiddle

[Vue.js] validateAll doesn't work with inputs generated by v-for Subscribe to RSS

I’ve got a form in which the inputs are added dynamically with the v-for loop. Each field should be validated, and before user submit the form it should be checked wherever it’s valid or not. The problem is that the this.$validator.validateAll() always return true, even if the inputs are invalid. What I’m doing wrong?

<div id=”app”>
<v-app id=”inspire”>
<v-flex md4 offset-md4>
<form data-vv-scope=”photoForm”>
<v-text-field v-for=”index in 5”
:key=”index”
:label=”‘photo’ + index”
:error-messages=”errors.collect(‘photoForm.photoName’ + index)”
v-validate=”‘max:10’”
:data-vv-name=”‘photoForm.photoName’ + index”
color=”purple” autocomplete=”on”
counter=”10” >
</v-text-field>
</form>
<p>Is valid form? { validationResult }</p>
</v-flex>
<v-btn @click=”validate” color=”purple” dark>
validate
</v-btn>
</v-app>
</div>

Vue.use(VeeValidate);
new Vue({
el: “#app”,
data() {
return {
validationResult: ‘’
}
},
methods: {
validate() {
this.$validator.validateAll(‘photoForm’).then(result => {
this.validationResult = result
})
}
}
});

And codepen where I reproduce the problem: https://codepen.io/anon/pen/jjrJdE

Solution :

You need to store the form data somewhere so the validation has something to work on, I assume.

See https://codepen.io/cwg999/pen/MMjWNj?editors=1011

The main changes I made were to put the dynamically generated inputs into the data() and used that to reference them in the for-loop.

(note: you can also use v-model instead of :value/@input)

<v-text-field v-for=”o,i in photoForm”
:key=”i”
:label=”o.label+ ‘ ‘ + (i+1)”
:error-messages=”errors.collect(‘photoForm.photoName’ + i)”
v-validate=”‘max:10’”
:name=”‘photoName’ + i”
:value=o.value
@input=”o.value = $event”
color=”purple” autocomplete=”on”
counter=”10” >
</v-text-field>

data() {
return {
validationResult: ‘’,
photoForm:[
{label:’Photo’,value:’’},
{label:’Photo’,value:’’}
]
}
},

[Vue.js] Computed property defined within mapState() has no setter Subscribe to RSS

In my Nuxt application I’m initialising computed properties with data retrieved from the store within the mapState helper, however I also need to modify the value of these computed properties upon certain user actions.

Well I can’t do that as I get a “has no setter” error when using that code:

computed: {
…mapState({
monRaw: state => state.currentWeek

I tried to define setters to no avail and the code doesn’t make too much sense either:

computed: {
…mapState({
get: function (state) {
return state.currentWeek
},
set: function (state, data) {
state.currentWeek = data
}

Is it simply not possible to change computed properties’ values when defined with mapState()?

Solution :

mapState is a convenience function that provides a mapping of a computed property under the identical key in the vuex store. It provides read only access to those properties. Since you want to use updates you will have to forego mapstate and define the own computed getter/setter as follows:

computed: {
currentWeek: {
get() {
return this.$store.state.currentWeek;
},
set(v) {
this.$store.commit(‘updateCurrentWeek’, v);
}
}
…
}

obviously updateCurrentWeek will have to be defined in the mutations section of the vuex store.

[Vue.js] Vue Cli 3 - Include js file in dist when compile web component Subscribe to RSS

Im working on a project created with vue.js Cli 3 and Ive been working with vue.js web components.

I need to create a loader file (called loader.js) that will require different libraries.

require(.node_modules///library.js);
require(.node_modules///script.js);

I use this command to compile the web component:

vue-cli-service build –target wc –name widget ./src/components/widget.vue

What I need at this point it that when build the web component, webpack also process the loader.js file and bundle all the require inside the dist folder.

Im new working with webpack and I dont know how can I resolve this. Ive tried to use the CopyWebpackPlugin but it only copied the loader.js file and doesnt include the require files.

module.exports = {
plugins: [
new CopyWebpackPlugin(
[
{
from: ‘src/loader.js’,
to: ‘.’,
},
],
),
],
}

How can I solve this?

Solution :

If it’s a static js file, you can add it into the public folder

The public Folder

Any static assets placed in the public folder will simply be copied and not go through webpack. You need to reference them using absolute paths.

src: https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

If it is and/or has dependencies, then using import in the main code will include it in the bundle.

[Vue.js] Laravel frontend to Django backend x-csrf-token not allowed in preflight response Subscribe to RSS

there is Laravel framework with VueJS serving as the frontend. This frontend is hosted on xampp’s localserver on ports 80,443 with the configured url “http://test.net". I send API requests from VueJS app using axios to a Django backend, where there is installed a working Rest framework (Accessible through Postman). The backend server is http://127.0.0.1:8000. Because the servers are different, there is installed django-cors-headers package and configured the settings.py file to include this package, and also include the middleware, as shown in the documentation.

This is the axios request from Vue:

let url = “http://localhost:8000/leadmanager/api/lead/";
axios.get(url)
.then(res => console.log(res.data))
.catch(error => console.log(error));

Initially I got this error:

Access to XMLHttpRequest at ‘http://localhost:8000/leadmanager/api/lead/' from origin ‘http://test.net' has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

So I checked the documentation and installed django-cors-headers and included the Laravel website’s url inside CORS_ORIGIN_WHITELIST.

CORS_ORIGIN_WHITELIST = [
“http://test.net"
]

After doing this, I get a different error. I suspected this would be because Laravel by default attaches x-csrf-token headers to the packets being sent out.

Access to XMLHttpRequest at ‘http://localhost:8000/leadmanager/api/lead/' from origin ‘http://test.net' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

To allow requests with x-csrf-tokens, I tried the following settings for django-cors-headers in settings.py:

CORS_ALLOW_HEADERS = [
‘x-csrftoken’
]

CSRF_TRUSTED_ORIGINS = [
‘http://test.net'
]

So how do I configure Django’s backend to allow requests from Laravel attached with x-csrf-headers? to do this without having to modify Laravel’s settings to not attach these headers since they are a security feature implemented by Laravel to mitigate CSRF attacks.

Solution :

After referring to https://stackoverflow.com/a/32501365/10888237 pointed out by @bak2trak, I checked the request headers being sent out by the Laravel application from the Chrome Developer Console (Network tab), the request headers were “x-csrf-token and x-requested-with”. So I modified CORS_ALLOW_HEADERS to add the “x-requested-with” header.

CORS_ALLOW_HEADERS = [
‘x-csrf-token’,
‘x-requested-with’
]

It gave a different error, 401 [Unauthorized], so I removed the default authentication classes of the REST_FRAMEWORK.

Now the requests can finally pass through and I get the appropriate response from Django backend for my Laravel’s GET requests.

[Vue.js] Is there a way to use NumberFormat() formatter (Google Charts) in vue-google-charts vue.js wrapper Subscribe to RSS

there is been tasked with formatting some columns in charts using vue-google-charts, a vue.js wrapper for Google Charts and when not sure that ‘NumberFormat()’ is even supported in vue-google-charts.

First, if somebody knows if it is or isn’t, I would like to know so I don’t waste much time pursuing something that isn’t possible. But if it is, I sure would love an example of how to do it.

What we are doing is returning our chart data from the database and passing it into this vue.js wrapper. We are creating several charts but there are columns that have commas in them we want to remove.

Please review the existing code. when trying to implement this using @ready as documented in the docs for vue-google-charts.

vue-google-charts docs -> https://www.npmjs.com/package/vue-google-charts

Here is our existing code with a little framework of the onChartReady method already in place.

And then …

export default {
components: {
GChart,
Icon
},
props: {

},
data() {
return {
charts: window.template_data,
selected: ‘null’,
selects: [],
chartToSearch: false,
directDownloads: {
‘Inactive Phones’ : {
‘slug’ : ‘phones_by_status’,
‘search_by’ : 2,
‘search’ : ‘/Inactive/‘
},
‘Active Phones’ : {
‘slug’ : ‘phones_by_status’,
‘search_by’ : 2,
‘search’ : ‘/Active/‘
},

}
}
},
created(){
for (let i in this.charts){
if( !this.charts[i].slug ) continue;
$.post(ajaxurl, {
action: ‘insights_‘ + this.charts[i].slug,
}, (res) => {
console.log(res.data);
if (res.success) {
this.$set(this.charts[i], ‘data’, res.data);
}
});
}
// console.log(this.charts);
},
methods: {
onChartReady(chart,google) {
let formatter = new.target.visualization.NumberFormat({
pattern: ‘0’
});
formatter.format(data, 0);
chart.draw(data)
},
toggleChart(chart) {
jQuery.post(ajaxurl, {
‘action’: ‘update_insight_chart_type’,
‘chartType’: chart.ChartType,
‘chartSlug’: chart.slug
}, (res) => {
chart.ChartType = res.data
})
},
csvHREF(chart) {
return window.location.href + ‘&rr_download_csv=’ + chart.slug + ‘&rr_download_csv_search_by=’ + chart.query_type + ‘&rr_download_csv_search=’ + chart.query.trim()
},
filtered(data, query, column) {
query = query.trim();
if (query){
let localData = JSON.parse(JSON.stringify(data));
let column_Headers = localData.shift();

localData = localData.filter((row)=>{
if( query.endsWith(‘/‘) && query.startsWith(‘/‘) ){
return new RegExp(query.replace(/\//g, ‘’)).test(String(row[column]));
}
return String(row[column]).toLowerCase().indexOf(query.toLowerCase()) > -1;
});
localData.unshift(column_Headers);
return localData;
}
return data;
},
filterIcon(chart) {
chart.searchVisible = !chart.searchVisible;
chart.query = “”;
setTimeout(()=>{
document.querySelector(`#chart-${chart.slug} .insightSearch`).focus();
}, 1);
}
}
}
document.getElementsByClassName(‘google-visualization-table’)

If anybody can help in ANY way, when all ears.

Thanks!

Solution :

not familiar with vue.js or the wrapper,
but in google charts, you can use object notation in the data,
to provide the formatted values.

all chart types will display the formatted values by default.

google’s formatters just simply do this for you.

so, in the data, replace the number values with objects,
where v: is the value and f: is the formatted value…

{v: 2000, f: ‘$2,000.00’}

see following working snippet…

google.charts.load(‘current’, {
packages: [‘table’]
}).then(function () {

var chartData = [
[‘col 0’, ‘col 1’],
[‘test’, {v: 2000, f: ‘$2,000.00’}],
];

var dataTable = google.visualization.arrayToDataTable(chartData);

var table = new google.visualization.Table(document.getElementById(‘chart_div’));
table.draw(dataTable);
});
<script src=”https://www.gstatic.com/charts/loader.js"></script>
<div id=”chart_div”></div>

Top 10 Web Skills

html5, css3, javascript, node.js, etc