How to set an after sprite to a pseudo-element?

Question

JavaScript

Preparing my sprites with compass. Everything is working. There was a task to display "daw" in a checkbox.
The checkbox is made as follows. The input itself is hidden. The label is displayed and a pseudo-element is created in css - a square, which is pressed to the right to the edge of the form. Now we need to display the checkbox by adding a class to the label. This can be done using a separate picture, but I would like to pull it out of the sprite. There was an idea to pull it out manually by setting the indents, but I'm afraid the desired image will move during the development process, so I abandoned this idea.

Answer 1

NogerbekNurzhan , your geoObject method is too smart. We need decomposition. A separate method creates the map, a separate method manipulates the rendered objects, and another can clear the objects. example: createMap(), setObjects(dateStart, dateEnd), deleteObjects()
Write a separate handler for the event @clicked=onChangeDatein which you call the re-creation of objects on the existing map

onChangeDate(dateStart, dateEnd) {
  this.deleteObjects();
  this.setObjects(dateStart, dateEnd);
}

---------------------------------
Ideally, in general, take the map directly into a separate component, in which to hide all manipulations with the map , but what you now call YandexMap is still a composite component containing both a map and a control panel.
Then the map management can be reduced to the transfer of props, something like this

<MyComp>
  <Navbar @clicked="onChangeDate"/>
  <YandexMap
    :date-start="dateStart"
    :date-end="dateEnd"
  />
<MyComp>
<script>
data: function(){
  return {
    dateStart: null,
    dateEnd: null,
  }
}
methods: {
  onchangeDate(d1, d2){
    this.dateStart = d1;
    this.dateEnd = d2;
  }
}
</script>

well, in the YandexMap component, respectively, add props for dates, hang up a listener to change them, and clear objects in its handler and load new ones.

Answer 2

In the child component on click this.$emit('event-name', data). In the parent template on the child component: @event-name="handler". Just like Alex gave an example.

Answer 3

In general, this is an anti-pattern, so even the view docs say that the data must be stored in the application state, at least I just use a separate view instance

Answer 4

Incultivate the mixin into the label pseudo-element (file with checkbox ok.png)

@import 'compass'
@import "compass/utilities/sprites"

$icons-layout:smart
@import "grey/icons/*.png"
@include all-icons-sprites
...
label.boolean.checked:after
  @include icons-sprite(ok)

compass-style.org/help/tutorials/spriting Selector Control
section

Answer 5

TAGS O_o