How to expand infoblock text on click?

Question

JavaScript

Good day!
I have info blocks associated with markers on my google map. It is necessary that their text is hidden in this form "...", and when pressed, its information appears.
I came up with this trivial solution:

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

But I didn't succeed. Even the click event doesn't fire, even in dev-tools vue.
Please tell me what is wrong and how to solve the problem?

Answer 1

You, comrade, do not seem to understand:
a) how const works;
b) how inline event handlers work;
c) how Vue works.
a) const is only valid within a block.
b) The code written inline in the handler is just the body of the anonymous function. The function creates its own scope, which means that considering point a, the declared variable is not visible anywhere else.
c) Your template is compiled (Vue.compile to help you) into something like this function

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();
  }
}

and it is quite obvious that nothing should work.
Solution to the problem: either store the state somewhere in data, or make a wrapper component (conditionally gmap-info-window-collapsible) over gmap-info-window, which will store the state and collapse-expand on click.