Как раскрыть текст инфоблока по нажатию?

Question

[Иван Беловиков]

Доброго времени суток!
У меня на гугл карте есть инфо блоки, связанные с маркерами. Нужно чтобы их текст скрывался в такой вид "...", а при нажатии появлялась его информация.
Я придумал вот такое тривиальное решение:

<gmap-info-window v-if="m.data.length > 0" @click="const text = m.data">{{ text === undefined ? '...' : text }}</gmap-info-window>

Но у меня не получилось. Даже событие клика не срабатывает, даже в dev-tools vue.
Пожалуйста, скажите что не так и как решить проблему?

Comments

[Игорь]

В вашем случае вообще можно обойтись без v-if
Всё дело в том, что в вашем распоряжении есть свойство, например text.

Вы можете сделать вычисляемое свойство text.
При определённых условиях вычисляемое свойство меняется на ... или на любое значение.

text === undefined
По мне так плохая идея.
Переделите значение по дефолту, например null или ''

Answer 1

[Aetae]

Вы, товарищ, похоже не понимаете:
а) как работает const;
b) как работают inline обрабочики событий;
c) как работает Vue.

a) const действителен только в рамках блока.
b) Код написанный inline обрабочике - это всего лишь тело анонимной функции. Функция создаёт свой scope, а значит учитывая пункт a - обявленная переменная больше нигде не видна.
c) Ваш шаблон компилируется(Vue.compile вам в помощь) примерно вот в такую функцию

function anonymous() {
  with(this) {
    return m.data.length > 0 ? _c("gmap-info-window", {
      on : {
        "click" : function($event$jscomp$0) {
          const text$jscomp$10 = m.data;
        }
      }
    }, [_v(_s(text === undefined ? "..." : text))]) : _e();
  }
}

и вполне очевидно, что ничего и не должно работать.

Решение проблемы: либо хранить где-то в data состояние, либо сделать компонент-обёртку(условно gmap-info-window-collapsible) над gmap-info-window, который будет хранить состояние и сворачивать-разворачивать по клику.

Comments

[Иван Беловиков]

Спасибо вам огромное... Но в data хранить не могу, ибо будут открываться все маркеры с информацией на карте, а мне нужен конкретный на который нажали.

[Aetae]

Иван Беловиков, под data я имел ввиду vue data, т.е. или использовать тот же объект, откуда и берётся конкретный текст, или завести отдельный массивчик или мапу и хранить там соответствие.
Но вариант с обёрткой удобнее.

[Иван Беловиков]

Aetae, это офф. либа vue2-google-maps, как сделать обертку, если по инфо блоку даже событие клика не работает.
Вот полный код:
markers - users

Map.vue

<template>
  <splash v-if="!isSocketConnected"></splash>
  <gmap-map
    v-else
    :center="center"
    :zoom="zoom"
    :options="options"
    v-model="markers"
    style="height: 100%"
    @zoom_changed="zoomChange($event)"
    >
    <google-cluster v-if="isClustered">
        <google-marker
          :key="index"
          v-for="(m, index) in markers"
          :position="m.position"
          :id="m.id"
          :username="m.username"
          :clickable="m.isClickable"
          :draggable="false"
          :icon="m.icon"
          @click="clickMarker(m)">
          <gmap-info-window v-if="m.data.length > 0" @click="const text = m.data">{{ text === undefined ? '...' : text }}</gmap-info-window>
        </google-marker>
    </google-cluster>
      <google-marker v-else
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :id="m.id"
        :username="m.username"
        :clickable="m.isClickable"
        :draggable="false"
        :icon="m.icon"
        @click="clickMarker(m)">
        <gmap-info-window v-if="m.data.length > 0">{{ m.data }}</gmap-info-window>
      </google-marker>
  </gmap-map>
</template>

<script>
 import { mapGetters } from 'vuex';
 import Splash from './Splash';
 const colors = [ { "featureType": "all", "elementType": "labels.text.fill", "stylers": [ { "saturation": 36 }, { "color": "#000000" }, { "lightness": 40 } ] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [ { "visibility": "on" }, { "color": "#000000" }, { "lightness": 16 } ] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [ { "color": "#000000" }, { "lightness": 20 } ] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [ { "color": "#000000" }, { "lightness": 17 }, { "weight": 1.2 } ] }, { "featureType": "administrative.locality", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "administrative.neighborhood", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 20 } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 21 } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "color": "#000000" }, { "lightness": 17 } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "color": "#000000" }, { "lightness": 29 }, { "weight": 0.2 } ] }, { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 18 } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 16 } ] }, { "featureType": "transit", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 19 } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 17 } ] } ];
  export default {
    data() {
      return {
        zoom: 5,
        center: {
          lat: 38,
          lng: 34
        },
        init: false,
        options: {
          disableDefaultUI: true,
          zoomControl: true,
          zoomControlOptions: {
              position: 8
          },
          streetViewControl: false,
          streetViewControlOptions: {
              position: 4
          },
          scrollwheel: true,
          styles: colors
        },
      }
    },
    methods: {
      zoomChange(event) {
        this.zoom = event;
      },
      clickMarker(marker) {
        this.$store.dispatch('clickMarker', marker);
        this.$socket.emit('joinConversation', marker)
        try {
          this.$f7.views.main.router.load({url: `/conversation/${marker.id}`})
        } catch (e) {
          this.$f7.alert(marker.username, 'Tick')
        }
      },
      initMap(position) {
        this.$store.dispatch('init', true);

        let lat = this.locationBlur ? Number(position.coords.latitude.toFixed(2)) : position.coords.latitude;
        let lng = this.locationBlur ? Number(position.coords.longitude.toFixed(2)) : position.coords.longitude;

        let myLocation = { lat, lng, username: this.$store.state.user.username, id: this.$socket.id }

        if (!this.init) {
          console.log('Howdy, u\'re awesome. What a shiny day. Have a good day, be polite.');
          this.center = myLocation;
          this.zoom = 15;
          this.init = true;
          // TODO: @cagataycali do it this a function.
          fetch(`https://trends.tick.chat/${lat.toFixed(0)}/${lng.toFixed(0)}`)
            .then(res => res.json())
            .then(res => {
              this.$store.dispatch('setTrends', res)
            })
            .catch(err => {
              console.log(`Request err ${JSON.stringify(err)}`)
            })
        } else {
          if (this.$store.state.trends.length === 0) {
            fetch(`https://trends.tick.chat/${lat.toFixed(0)}/${lng.toFixed(0)}`)
              .then(res => res.json())
              .then(res => {
                this.$store.dispatch('setTrends', res)
              })
              .catch(err => {
                console.log(`Request err ${JSON.stringify(err)}`)
              })
          }
          console.log('Wow, you\'re moving buddy.');
        }
        this.$store.dispatch('setLocation', myLocation);
        this.$socket.emit('myLocation', myLocation);
      },
    },
    computed: {
      ...mapGetters([
       'isSocketConnected',
       'markers',
       'locationBlur',
       'user'
     ]),
     isClustered() {
       return this.zoom < 20
     }
   },
  created() {
    let isMobile = window.isMobile();
    this.options.zoomControl = !isMobile;
    this.options.streetViewControl = !isMobile;
    if (navigator.geolocation) {
      navigator.geolocation.watchPosition(this.initMap,
      (error) => {
        if (error.code == error.PERMISSION_DENIED)
            this.$f7.alert('Tick require your location information. We promise about your location is blurred by default. You can share your exact location If you want. Please share your location and restart page.', 'Tick')
      }, {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      });
    } else {
      this.$f7.alert('Geolocation is not supported by this browser.', 'Tick')
    }
  },
  components: {
    Splash
  }
}
</script>

<style media="screen">
  .gm-style-iw {
    color: #353535
  }
@media screen and (max-width: 500px) {
  .gm-style-cc {
    display: none;
  }
  .gm-style-iw {
    color: #353535
  }
  img[src="https://maps.gstatic.com/mapfiles/api-3/images/google_white5_hdpi.png"]{display:none}
}
</style>