VueJS. Не срабатывает событие v-on:click

@Mike_Kharkov · Регистрация: 16.10.2015

Author24 — интернет-сервис помощи студентам

Например есть такой код:

Javascript

Vue.component('sub-wrapper', {
    template: '<div class="sub_wrapper"><slot></slot></div>',
    data: function () {
      return {
        width: 600,
        height: '',
      }
    },
    computed: {
      getWidth: function () {
        alert(this.width + 'px')
      }
    }
  }
);
 
Vue.component('my-template-canvas', {
  template: '<v-stage ref="stage" :config="configKonva">\n' +
'                <v-layer ref="layer">\n' +
'                  <v-rect ref="zzz" :config="configCircle2"></v-rect>\n' +
'                </v-layer>\n' +
'              </v-stage>',
  
  data: function () {
    return {
      configKonva: {
        width: 600,
        height: 600,
        stroke:'gray'
      },
      configCircle2: {
        x: 50,
        y: 50,
        width: 260,
        height: 160,
        fill: "gray",
        stroke: "#2a1725",
        strokeWidth: 2
      },
    }
  }
});
 
let root = new Vue({
  el: '.wrapper'
});

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>MK Trading</title>
    <link href="style/style.css" type="text/css" rel="stylesheet">
 
 
</head>
 
<body>
 
      <div class="wrapper">
 
          <sub-wrapper @click="getWidth()">
              <my-template-canvas></my-template-canvas>
          </sub-wrapper>
 
      </div>
      <!--    wrapper end  -->
 
    <script src="js/vue.js"></script>
    <script src='js/konva.js'></script>
    <script src='js/vue-konva.min.js'></script>
    <script src="js/script.js"></script>
</body>
</html>

CSS

div, span, a, ul, li, dl, dt, dd, fieldset, form, label, button, input, h1, h2, h3, h4, h5, h6, strong, p, br, i, figure, figcaption {
    margin: 0;
    padding: 0;
    border: 0 none;
}
 
:focus {
    border: 0 none;
}
 
button, a:hover, label:hover {
    cursor: pointer;
}
 
li {
    list-style: none outside none;
}
 
img {
    border: medium none;
}
 
a:active, a:focus, img, input, textarea {
    outline: none;
}
 
a:active {
    background-color: transparent;
}
 
textarea {
    resize: none;
    overflow: auto;
}
 
th, td {
    margin: 0;
    padding: 0;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
body {
    margin: 0;
    background-color: #fff;
}
 
.wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
.wrapper .sub_wrapper{
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
.konvajs-content{
    width: 100% ! important;
}
canvas{
    background-color: #c0c0c0 ! important;
}

В данном примере еще подключена либа VueConva - но суть не в ней - вопрос следующий:
Почему не срабатывает алерт при нажатии на блок <subwrapper> ?
Интересно что алерт срабатывает если в фаербаге(для vue) кликать по этому елементу непосредственно в дом дереве. )

VueJS. Не срабатывает событие v-on:click

@j2FunOnly · 02.02.2018, 10:26

computed - это вычисляемые свойства, они не предназначены для использования как функций. Плюс в вашем коде функция, используемая для вычисления свойства getWidth, не возвращает никаких значений.

Добавлено через 15 минут

HTML5

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>MK Trading</title>
  <link href="style/style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div class="wrapper">
    <sub-wrapper>
      <my-template-canvas></my-template-canvas>
    </sub-wrapper>
  </div>
 
  <script id="sub-wrapper" type="text/x-template">
    <div class="sub_wrapper" @click="clickHandler">
      <slot></slot>
    </div>
  </script>
 
  <script id="my-template-canvas" type="text/x-template">
    <v-stage ref="stage" :config="configKonva">
      <v-layer ref="layer">
        <v-rect ref="zzz" :config="configCircle2"></v-rect>
      </v-layer>
    </v-stage>
  </script>
 
  <script src="https://unpkg.com/vue"></script>
  <script src='https://unpkg.com/konva'></script>
  <script src='https://unpkg.com/vue-konva'></script>
  <script src="js/script.js"></script>
</body>
</html>

Javascript

const SubWrapper = {
  template: '#sub-wrapper',
  data () {
    return {
      width: 600,
      height: '',
    }
  },
  methods: {
    clickHandler () {
      alert(this.getWidth);
    }
  },
  computed: {
    getWidth () {
      return this.width + 'px';
    }
  }
};
 
const MyTemplateCanvas = {
  template: '#my-template-canvas',
  data () {
    return {
      configKonva: {
        width: 600,
        height: 600,
        stroke:'gray'
      },
      configCircle2: {
        x: 50,
        y: 50,
        width: 260,
        height: 160,
        fill: "gray",
        stroke: "#2a1725",
        strokeWidth: 2
      }
    }
  }
};
 
Vue.use('VueKonva');
 
const root = new Vue({
  el: '.wrapper',
  components: {
    SubWrapper,
    MyTemplateCanvas
  }
});

@Mike_Kharkov · 03.02.2018, 12:53 **[ТС]**

Сообщение от j2FunOnly

Плюс в вашем коде функция, используемая для вычисления свойства getWidth, не возвращает никаких значений.

Вот к стати на счет возврата значений я пока не совсем понимаю - почему происходит такая реакция?
Допустим вот еще пример - тестирую метод 'watch':

Javascript

const SubWrapper = {
  template: '#sub-wrapper',
  data: function () {
    return {
      newWidth2: 0,
    }
  },
  methods: {
    clickHandler () {
      alert([this.newWidth, this.newWidth2]);
    }
  },
  computed: {
    newWidth: function() {
      return this.$el.clientWidth;
    }
  },
  watch: {
    newWidth2: function() {
      this.$el.clientWidth;
    }
  }
};
 
const MyTemplateCanvas = {
  template: '#my-template-canvas',
  data () {
    return {
      configKonva: {
        width: 600,
        height: 600,
        stroke:'gray'
      },
      configCircle2: {
        x: 50,
        y: 50,
        width: 260,
        height: 160,
        fill: "gray",
        stroke: "#2a1725",
        strokeWidth: 2
      }
    }
  }
};
 
Vue.use('VueKonva');
 
const root = new Vue({
  el: '.wrapper',
  components: {
    SubWrapper,
    MyTemplateCanvas
  }
});

Что я только уже не пробовал прописывать внутри него(на протяжении 5-ти часов)
но он все время не выдает никаких результатов - не подхватывает значение.
Вопрос:
Почему это происходит - что я упускаю из виду?
(гугл никакой(ни буржуйский не наш) не помагет - поскольку все примеры которые находил на форумах структурно очень отличаются.)

P.S. В данном случае я просто хочу отслеживать(динамически в зависимости от ширины браузера) значение ширины конкретного блока.

Добавлено через 19 часов 26 минут
Вопрос решен.
Как оказалось во время моих предыдущих попыток решить задачу - ответы найденные мною оказались верными.
Просто фаербаг вуе не обновляет значение динамически(по крайней мере в моем случае)
Необходимо щелкнуть по другому компоненту и вернутся опять на интересующий - что бы данные обновились в фаербаге.

	03.02.2018, 12:53