Styjun

Is it legal for a supermarket to refuse to sell an adult beer if an adult with them doesn’t have their ID?

How to not confuse readers with simultaneous events?

How to find location on Cambridge-Mildenhall railway that still has tracks/rails?

Is it possible to have a career in SciComp without contributing to arms research?

Why did my "seldom" get corrected?

How did Jayne know when to shoot?

When designing an adventure, how can I ensure a continuous player experience in a setting that's likely to favor TPKs?

Random piece of plastic

What was the average temperature of space near the Spitzer Satellite Telescope?

The most secure way to handle someone forgetting to verify their account?

Should I use a resistor between the gate driver and MOSFET (gate pin)?

Applying for jobs with an obvious scar

Arithmetics in LuaLaTeX

What did Jeremy Hunt mean by "slipped" to miss a vote?

What were the problems on the Apollo 11 lunar module?

What was the difference between a Games Console and a Home Computer?

Whipping heavy cream with melted chocolate

Why is the Intel 8086 CPU called a 16-bit CPU?

Operation Unzalgo

Locked-up DOS computer beeped on keypress. What mechanism caused that?

Is encryption still applied if you ignore the SSL certificate warning for self signed?

Is there a difference between PIO and GPIO pins?

Does unblocking power bar outlets through short extension cords increase fire risk?

Practical example in using (homotopy) type theory

Vue.js + SVG Map - how to style selected item?

How to insert an item into an array at a specific index (JavaScript)?How can I know which radio button is selected via jQuery?How can I select an element with multiple classes in jQuery?How can I select an element by name with jQuery?How to merge two arrays in JavaScript and de-duplicate itemsHow to access SVG elements with JavascriptSelecting SVG and path elements with JavaScriptHow to add event listeners to objects in a svg?Dynamically loading interactive SVGs into Vue.js projectHow to access data from the SVG map with Vue.js

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have SVG map and .selected class in my which adds color to the selected province:

.selected 
 fill: brown;

I cannot add any methods or events to HTML directly, because I will use different maps.

I use an event listener in my methods to access data and render it based on the province that was clicked.

How can I do it with the .selected class? So if I click the given province it get a .selected class and if I click another one the previous one loses the .selected class?

Here is my snippet with my code: https://mdbootstrap.com/snippets/jquery/marektchas/507954

javascript vue.js svg vuejs2 dom-events

share|improve this question

edited Mar 26 at 20:22

Brian Tompsett - 汤莱恩

4,4071414 gold badges4040 silver badges107107 bronze badges

asked Mar 26 at 9:21

Marek HasMarek Has

721010 bronze badges

add a comment | 

0

I have SVG map and .selected class in my which adds color to the selected province:

.selected 
 fill: brown;

I cannot add any methods or events to HTML directly, because I will use different maps.

I use an event listener in my methods to access data and render it based on the province that was clicked.

How can I do it with the .selected class? So if I click the given province it get a .selected class and if I click another one the previous one loses the .selected class?

Here is my snippet with my code: https://mdbootstrap.com/snippets/jquery/marektchas/507954

javascript vue.js svg vuejs2 dom-events

share|improve this question

edited Mar 26 at 20:22

Brian Tompsett - 汤莱恩

4,4071414 gold badges4040 silver badges107107 bronze badges

asked Mar 26 at 9:21

Marek HasMarek Has

721010 bronze badges

add a comment | 

I have SVG map and .selected class in my which adds color to the selected province:

.selected 
 fill: brown;

I cannot add any methods or events to HTML directly, because I will use different maps.

I use an event listener in my methods to access data and render it based on the province that was clicked.

How can I do it with the .selected class? So if I click the given province it get a .selected class and if I click another one the previous one loses the .selected class?

Here is my snippet with my code: https://mdbootstrap.com/snippets/jquery/marektchas/507954

javascript vue.js svg vuejs2 dom-events

share|improve this question

edited Mar 26 at 20:22

Brian Tompsett - 汤莱恩

4,4071414 gold badges4040 silver badges107107 bronze badges

asked Mar 26 at 9:21

Marek HasMarek Has

721010 bronze badges

.selected 
 fill: brown;

share|improve this question

edited Mar 26 at 20:22

Brian Tompsett - 汤莱恩

4,4071414 gold badges4040 silver badges107107 bronze badges

asked Mar 26 at 9:21

Marek HasMarek Has

721010 bronze badges

share|improve this question

edited Mar 26 at 20:22

Brian Tompsett - 汤莱恩

4,4071414 gold badges4040 silver badges107107 bronze badges

asked Mar 26 at 9:21

Marek HasMarek Has

721010 bronze badges

edited Mar 26 at 20:22

Brian Tompsett - 汤莱恩

4,4071414 gold badges4040 silver badges107107 bronze badges

edited Mar 26 at 20:22

Brian Tompsett - 汤莱恩

4,4071414 gold badges4040 silver badges107107 bronze badges

asked Mar 26 at 9:21

Marek HasMarek Has

721010 bronze badges

asked Mar 26 at 9:21

Marek HasMarek Has

721010 bronze badges

2 Answers
2

active

oldest

votes

1

You can add the .selected class programmatically.

First add a new method to remove the class on all paths, then add the class for the selected element on click:

methods: 

 removeSelection (paths) 
 paths.forEach(el => el.classList.remove("selected")) 
 ,

 addClickHandler() 
 let paths = this.$el.querySelectorAll('path')
 paths.forEach(el => 
 let id = el.attributes.id.value
 el.addEventListener('click', () => 
 this.province = this.provinces.find(province => province.id == id)

 this.removeSelection(paths)
 el.classList.add("selected")

 // Animation
 this.isActive = true
 setTimeout(() => this.isActive = false , 200)
 )
 )
 

share|improve this answer

answered Mar 26 at 10:03

SovalinaSovalina

3,91844 gold badges1010 silver badges2727 bronze badges

add a comment | 

1

You can use a conditional class binding as described in the vue.js docs under Class & Style Bindings

In your case, this could look like

<path d="...snip..."
 id="AL" name="Albania" :class="selected: province.id == 'AL'">
</path>

Since this would force you to add the comparison for each province, I'd suggest you render the SVG dynamically:

• Add the SVG path to the province's data, e.g. id: 'LT', name: 'Lithuania', vat: 21, path='M707.9 ... 0.5z'



• 
  

  Since you can simply create SVG using vue you can render the provinces in a loop and bind all it's properties, e.g.

  
  
  

  <path v-for="p in provinces" :key="p.id"
   :d="p.path"
   :id="p.id" 
   :name="p.name" 
   :class="selected: province.id == p.id">
  

  
  
  
  

Going this way would significantly shrink your markup.

share|improve this answer

answered Mar 26 at 9:52

wwernerwwerner

1,7491414 silver badges2222 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55353550%2fvue-js-svg-map-how-to-style-selected-item%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You can add the .selected class programmatically.

First add a new method to remove the class on all paths, then add the class for the selected element on click:

methods: 

 removeSelection (paths) 
 paths.forEach(el => el.classList.remove("selected")) 
 ,

 addClickHandler() 
 let paths = this.$el.querySelectorAll('path')
 paths.forEach(el => 
 let id = el.attributes.id.value
 el.addEventListener('click', () => 
 this.province = this.provinces.find(province => province.id == id)

 this.removeSelection(paths)
 el.classList.add("selected")

 // Animation
 this.isActive = true
 setTimeout(() => this.isActive = false , 200)
 )
 )
 

share|improve this answer

answered Mar 26 at 10:03

SovalinaSovalina

3,91844 gold badges1010 silver badges2727 bronze badges

add a comment | 

1

You can add the .selected class programmatically.

First add a new method to remove the class on all paths, then add the class for the selected element on click:

methods: 

 removeSelection (paths) 
 paths.forEach(el => el.classList.remove("selected")) 
 ,

 addClickHandler() 
 let paths = this.$el.querySelectorAll('path')
 paths.forEach(el => 
 let id = el.attributes.id.value
 el.addEventListener('click', () => 
 this.province = this.provinces.find(province => province.id == id)

 this.removeSelection(paths)
 el.classList.add("selected")

 // Animation
 this.isActive = true
 setTimeout(() => this.isActive = false , 200)
 )
 )
 

share|improve this answer

answered Mar 26 at 10:03

SovalinaSovalina

3,91844 gold badges1010 silver badges2727 bronze badges

add a comment | 

You can add the .selected class programmatically.

First add a new method to remove the class on all paths, then add the class for the selected element on click:

methods: 

 removeSelection (paths) 
 paths.forEach(el => el.classList.remove("selected")) 
 ,

 addClickHandler() 
 let paths = this.$el.querySelectorAll('path')
 paths.forEach(el => 
 let id = el.attributes.id.value
 el.addEventListener('click', () => 
 this.province = this.provinces.find(province => province.id == id)

 this.removeSelection(paths)
 el.classList.add("selected")

 // Animation
 this.isActive = true
 setTimeout(() => this.isActive = false , 200)
 )
 )
 

share|improve this answer

answered Mar 26 at 10:03

SovalinaSovalina

3,91844 gold badges1010 silver badges2727 bronze badges

methods: 

 removeSelection (paths) 
 paths.forEach(el => el.classList.remove("selected")) 
 ,

 addClickHandler() 
 let paths = this.$el.querySelectorAll('path')
 paths.forEach(el => 
 let id = el.attributes.id.value
 el.addEventListener('click', () => 
 this.province = this.provinces.find(province => province.id == id)

 this.removeSelection(paths)
 el.classList.add("selected")

 // Animation
 this.isActive = true
 setTimeout(() => this.isActive = false , 200)
 )
 )
 

share|improve this answer

answered Mar 26 at 10:03

SovalinaSovalina

3,91844 gold badges1010 silver badges2727 bronze badges

answered Mar 26 at 10:03

SovalinaSovalina

3,91844 gold badges1010 silver badges2727 bronze badges

answered Mar 26 at 10:03

SovalinaSovalina

3,91844 gold badges1010 silver badges2727 bronze badges

1

You can use a conditional class binding as described in the vue.js docs under Class & Style Bindings

In your case, this could look like

<path d="...snip..."
 id="AL" name="Albania" :class="selected: province.id == 'AL'">
</path>

Since this would force you to add the comparison for each province, I'd suggest you render the SVG dynamically:

• Add the SVG path to the province's data, e.g. id: 'LT', name: 'Lithuania', vat: 21, path='M707.9 ... 0.5z'



• 
  

  Since you can simply create SVG using vue you can render the provinces in a loop and bind all it's properties, e.g.

  
  
  

  <path v-for="p in provinces" :key="p.id"
   :d="p.path"
   :id="p.id" 
   :name="p.name" 
   :class="selected: province.id == p.id">
  

  
  
  
  

Going this way would significantly shrink your markup.

share|improve this answer

answered Mar 26 at 9:52

wwernerwwerner

1,7491414 silver badges2222 bronze badges

add a comment | 

1

You can use a conditional class binding as described in the vue.js docs under Class & Style Bindings

In your case, this could look like

<path d="...snip..."
 id="AL" name="Albania" :class="selected: province.id == 'AL'">
</path>

Since this would force you to add the comparison for each province, I'd suggest you render the SVG dynamically:

• Add the SVG path to the province's data, e.g. id: 'LT', name: 'Lithuania', vat: 21, path='M707.9 ... 0.5z'



• 
  

  Since you can simply create SVG using vue you can render the provinces in a loop and bind all it's properties, e.g.

  
  
  

  <path v-for="p in provinces" :key="p.id"
   :d="p.path"
   :id="p.id" 
   :name="p.name" 
   :class="selected: province.id == p.id">
  

  
  
  
  

Going this way would significantly shrink your markup.

share|improve this answer

answered Mar 26 at 9:52

wwernerwwerner

1,7491414 silver badges2222 bronze badges

add a comment | 

You can use a conditional class binding as described in the vue.js docs under Class & Style Bindings

In your case, this could look like

<path d="...snip..."
 id="AL" name="Albania" :class="selected: province.id == 'AL'">
</path>

Since this would force you to add the comparison for each province, I'd suggest you render the SVG dynamically:

• Add the SVG path to the province's data, e.g. id: 'LT', name: 'Lithuania', vat: 21, path='M707.9 ... 0.5z'



• 
  

  Since you can simply create SVG using vue you can render the provinces in a loop and bind all it's properties, e.g.

  
  
  

  <path v-for="p in provinces" :key="p.id"
   :d="p.path"
   :id="p.id" 
   :name="p.name" 
   :class="selected: province.id == p.id">
  

  
  
  
  

Going this way would significantly shrink your markup.

share|improve this answer

answered Mar 26 at 9:52

wwernerwwerner

1,7491414 silver badges2222 bronze badges

<path d="...snip..."
 id="AL" name="Albania" :class="selected: province.id == 'AL'">
</path>

share|improve this answer

answered Mar 26 at 9:52

wwernerwwerner

1,7491414 silver badges2222 bronze badges

answered Mar 26 at 9:52

wwernerwwerner

1,7491414 silver badges2222 bronze badges

answered Mar 26 at 9:52

wwernerwwerner

1,7491414 silver badges2222 bronze badges