Передайте ключ-переменную данных VueJS в onmouseover atrribute внутри тега <a>


Передайте ключ-переменную данных VueJS в onmouseover atrribute внутри тега &lt;a&gt;

25.10.2019 08:24:18 Просмотров 74 Источник

У меня есть следующие биты:

<script>
window.onload = function vue () {
      var app = new Vue({
                  el: '#app',
                  data () {
                      return {
                      message: 'Click here to edit your details!'
                  }
                }
              });
    }
</script>
<h2>Hello <a id="myName" href="#" onmouseover="???" v-bind:title="message">{{username}}</a></h2>

({{username}} извлекается из представления Django.)

Мне нужно каким-то образом передать значение 'message' в onmouseover или что-то подобное, чтобы при наведении указателя мыши на ссылку username оно показывало значение message во всплывающей подсказке Vue.

большое спасибо

html vue.js
У вопроса есть решение - Посмотреть?

Ответы - Передайте ключ-переменную данных VueJS в onmouseover atrribute внутри тега &lt;a&gt; / Pass VueJS data key-variable to onmouseover atrribute inside a <a> tag

ibra

25.10.2019 08:43:29

Вы можете использовать v-on mouseover для запуска функции, которая установит сообщение :

window.onload = function vue () {
          var app = new Vue({
                      el: '#app',
                      data () {
                          return {
                          message: '',
                          username: 'sss'
                      }
                    },
                    methods: {
                        showMessage() {
                            this.message= 'Click here to edit your details!'
                        }
                    }
                  });
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
    <h2>Hello <a id="myName" href="#" v-on:mouseover="showMessage" v-bind:title="message">{{username}}</a></h2>
    <div>
        {{message}}
    </div>
</div>

Источник
https://stackoverflow.com/questions/58563093/pass-vuejs-data-key-variable-to-onmouseover-atrribute-inside-a-a-tag/58563318#comment103445660_58563318
Спасибо! Это решило проблему, а также я понял, что строка <a> должна быть внутри div, указанного в этом случае #app ! В противном случае, пока он был вне этого <div>, он не работал.
Является ответом!
Eos Antigen

05.01.2020 02:32:11

Я только что обнаружил, что переменная данных VueJs, содержащая "сообщение", должна быть v-привязана к фактическому элементу HTML, как, например, атрибут 'title' html-тега. Таким образом, он может быть передан в атрибут 's title аналогично:

 <div id="app">
       <a id="user_name" href="#" v-bind:title="message">{{user_name}}</a>
 </div>

И имея только это: 

var app = new Vue({
                      el: '#app',
                      data: {
                          message: 'LOL'
                      }
                    })

И это в значительной степени то, как он работает, без необходимости вызова мыши.

Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X