Передайте ключ-переменную данных VueJS в onmouseover atrribute внутри тега <a>
У меня есть следующие биты:
<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.
большое спасибо
Ответы - Передайте ключ-переменную данных VueJS в onmouseover atrribute внутри тега <a> / Pass VueJS data key-variable to onmouseover atrribute inside a <a> tag

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>


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'
}
})
И это в значительной степени то, как он работает, без необходимости вызова мыши.