Axios not loading data to vue - vue.js

I am trying to load cytoscape graph using vue and axios. Anyway cant configure cytoscape so I tried first with axios and vue only. There is still problem with scope, but I can't figure where? What should I change? How to properly set vue and axios.
EDIT
So after setting this.nodes i would like to draw a grapg in cytoscape.js , but I always get errors:
-The style property text-outline-color: is invalid
-Do not assign mappings to elements without corresponding data (e.g. ele 6b899f09-359e-424d-9461-d71c8c3fcd3b for property text-outline-color with data field faveColor); try a [faveColor] selector to limit scope to elements with faveColor defined
-Uncaught TypeError: Cannot set property 'mapping' of null
I believe it is array problem, but I can't figure out how to set array properly so this can work.
Here is code:
draw: function(){
this.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: this.main_layout,
padding: 10
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'shape': 'data(faveShape)',
'width': 'mapData(weight, 40, 80, 20, 60)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 2,
'text-outline-color': 'data(faveColor)',
'background-color': 'data(faveColor)',
'color': '#fff'
})
.selector(':selected')
.css({
'border-width': 3,
'border-color': '#333'
})
.selector('edge')
.css({
'curve-style': 'bezier',
'opacity': 0.666,
'width': 'mapData(strength, 70, 100, 2, 6)',
'target-arrow-shape': 'triangle',
'source-arrow-shape': 'circle',
'line-color': 'data(faveColor)',
'source-arrow-color': 'data(faveColor)',
'target-arrow-color': 'data(faveColor)'
})
.selector('edge.questionable')
.css({
'line-style': 'dotted',
'target-arrow-shape': 'diamond'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: this.nodes
},
ready: function(){
window.cy = this;
}
});

I assume that response.data is an array or object ans vm.projekt with null there is no vue-getter registred. So please try to do
Vue.set(vm, 'projekt', response.data) there is also a $set in every vue instance (this)
instead of
vm.projekt = response.data
In general i would advise you to push ajax-datas into reactive arrays, that works very well.

Related

Is it possible to convert JSFiddle to VSCode format?

I'm trying to convert my jsfiddle code to VSCode, but I wasn't able to, as copy and pasting + code format editing were not working.
(jsfiddle link in question: https://jsfiddle.net/b2pLmqrj/ )
I've attempted to copy and paste it in, fix the format with tags (script, style, etc), and completely redo it from scratch, but to no avail. Does anyone know what I should fix in it to change it to VSCode format?
HTML:
<div id="map"></div>
CSS:
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Javascript:
mapboxgl.accessToken = 'pk.eyJ1IjoiMWRyaXZlYnV5IiwiYSI6ImNsNjN1NjhjejBhZjYzaW44YXN0MzByb3YifQ.mykT1INa7Fbkk4VqIpdM_Q';
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11', // style URL
center: [-68.137343, 45.137451], // starting position
zoom: 5 // starting zoom
});
map.on('load', () => {
// Add a data source containing GeoJSON data.
map.addSource('maine', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
// These coordinates outline the United States.
'coordinates': [
[
[-125.15625000000001, 48.04870994288686],
[-124.71679687499999, 43.32517767999296],
[-125.15625000000001, 39.639537564366684],
[-121.11328124999999, 34.59704151614417],
[-121.11328124999999, 34.59704151614417],
[-117.158203125, 32.47269502206151],
[-105.732421875, 31.27855085894653],
[-97.20703125, 25.64152637306577],
[-84.287109375, 29.84064389983441],
[-80.947265625, 24.84656534821976],
[-74.970703125, 35.38904996691167],
[-66.62109375, 45.02695045318546],
[-68.73046875, 47.39834920035926],
[-71.455078125, 44.84029065139799],
[-82.880859375, 41.96765920367816],
[-88.154296875, 48.22467264956519],
[-109.072265625, 49.03786794532644],
[-123.134765625, 49.15296965617042],
[-125.15625000000001, 48.04870994288686],
]
]
}
}
});
// Add a new layer to visualize the polygon.
map.addLayer({
'id': ' ',
'type': 'fill',
'source': 'maine', // reference the data source
'layout': {},
'paint': {
'fill-color': '#0080ff', // blue color fill
'fill-opacity': 0.2
}
});
// Add a black outline around the polygon.
map.addLayer({
'id': 'outline',
'type': 'line',
'source': 'maine',
'layout': {},
'paint': {
'line-color': '#000',
'line-width': 0
}
});
});

How to store Vue.js component data in Vuex?

I'm building a link builder that lets people share multiple links from one link. At the moment I have several "cards" that users can put into their link template. For example, this allows them to have links to their music on Spotify (one card), or a link to their Youtube channel (another card).
I'm using VueDraggable to allow users to drag their cards into their template..
What I don't understand is, how should I store the cards components in the store so that they can be draggable? At the moment in my store I just have all of the cards as objects, as VueDraggable needs the data to be in 2 different lists..
export const state = () => ({
chosenCards: [
],
defaultCards: [
{id: 1, text: 'Twitter', font: 'Arial', destination: 'https://twitter.com/home', design: {color: '#1DA1F2', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1DA1F2', 'font-weight' : 600, font: 'Arial'}},
{id: 2, text: 'Spotify', font: 'Arial', destination: 'https://twitter.com/home', design: {color: '#1db954', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1db954', 'font-weight' : 600, font: 'Arial'}},
{id: 3, text: 'Youtube', font: 'Arial', destination: 'https://twitter.com/home', design: {color: '#c4302b', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#c4302b', 'font-weight' : 600, font: 'Arial'}},
],
})
So I don't actually use any card components I've made. I want to be able to design the cards as components instead of just objects in my store, and still have them be draggable. How should I go about doing this?

How to set dynamic styles in Vue.js component from Vuex store

I'm trying to set an array of components styles directly from the store, so that when the store changes, the design of each component changes too.
I store a set of links in my Vuex store like this:
links: [
{id: 1, text: 'Banana is a test', design: {color: 'red', 'background-color': 'blue', padding: '51px', margin: '5px', 'border-width' : '10px', 'border-color': 'blue', 'font-weight' : 600, font: 'Arial'}},
{id: 2, text: 'This is a test', design: {color: 'red', 'background-color': 'blue', padding: '20px', margin: '10px', 'border-width' : '10px', 'border-color': 'green', 'font-weight' : 600, font: 'Arial'}},
{id: 3, text: 'Monkey is a test', design: {color: 'red', 'background-color': 'blue', padding: '5px', margin: '5px', 'border-width' : '10px', 'border-color': 'green', 'font-weight' : 600, font: 'Arial'}},
]
and this is how I try to render them
<a v-for="link in links" :key=link.id :href="link.destination" :id=link.id :style="link.design">
{{link.text}}
</a>
the trouble is, when the design objects changes in the Vuex store, the links styles are not subsequently updated as I would expect.
In my Vue component I've tried getting the links in different ways, assuming this would change the reactivity. Currently I get them using a computed method like so:
computed: {
getLinks: function() {
return this.$store.state.links
}
},
but whenever I change the value of a background-color, say from 'blue' to 'red', I have to reload the page to see the change. Do I need to force a rerender of the page everytime I call my mutation?
This is my mutation for reference:
setSelectedItemDesign (state, payload ) {
state.selectedItem.design[Object.keys(payload)[0]] = Object.values(payload)[0]
}
and I'd call it from my component like this:
this.$store.commit('setSelectedItemDesign', {'background-color' : this.rgbaValue})
Thats because you read value from store directly here return this.$store.state.links. This way it is not reactive and also anitpattern, because you should not access store like that.
You should create getter to get value and then it should be ok.
The problem was that I was not updating the array in my store in a way that Vue observes to trigger a view update, as nada correctly pointed out.
You can see here for more details: vuejs.org/v2/guide/list.html#Array-Change-Detection

Cytoscape.js Edge and Arrow Style

How do I add directions to my edges?
How do I label my vertices?
Right now I have:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: graph_to_elements(graph),
style: 'node { background-color: blue; }'
});
graph is vertices and edges.
graph_to_elements is a function that graphs the inputted graph.
What other things can I add to style? When I tried adding different properties it would not work.
When you want to add directions to your edges, simply add the 'target-arrow-color' and 'target-arrow-shape' property to your style.
You can see this in a very easy example here: http://js.cytoscape.org/#getting-started/specifying-basic-options
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)' // here you can label the nodes
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle' // there are far more options for this property here: http://js.cytoscape.org/#style/edge-arrow
}
Stick to the notation provided by cytoscape when initializing the graph, when you have more than one style to define, you want to write:
style: [
{
selector: '...'
style: {...}
},
{
...
}
]

Background image link by data array

I get this error in cytoscape.js:
"Do not assign mappings to elements without corresponding data (e.g. ele p for property background-image with data field linkImagem); try a [linkImagem] selector to limit scope to elements with linkImagem defined"
Look data array:
{ data: { id: 'atr1', classificacao : '1', backgroundColor : '#F79646', nomeAtributo : 'Bancos desconfortáveis', angulo : '0', valign : 'top', halign : 'right', linkImagem : 'http://www.fec.unicamp.br/~confterm/imagens/background/nodes/8.png' }, position: { x:220, y: 300 }, selected: false, selectable: false, locked: false, grabbable: false }
Look script style options:
.selector('node')
.css({
'label': 'data(nomeAtributo)',
'text-valign': 'data(valign)',
'text-halign': 'data(halign)',
'color' : '#000',
'font-size': '11px',
'background-fit': 'fit',
'background-color': 'data(backgroundColor)',
'background-image': 'data(linkImagem)',
})
How I can solve this?
The solution is given to you in the error message. Either don't use mappers if you're not going to define the data for each matching element, or adjust your selectors so that they only match elements with the data defined.