this.data не работает в vue cli
Здраствуйте, в vue cdn для получения переменной из data было достаточно использовать this.myVariable
но ето почемуто не работает в vue cli <script>
export default {
name: "Auth",
data() {
return {
page: 0,
};
},
methods: {
selectPage(number) {
this.page = number; //пишет что this == undefined
},
},
directives: {
},
};
</script>
|
fori, нужно еще "переприсвоить" метод через <метод>.bind(this)
Или так оформить его вызов... Или "переопределить" this через "обычную" переменную... А потом ее использовать внутри метода. |
ksa, А могу ли я попросить пример пожалуйста))
|
ksa, не нужно. Vue это сам из коробки делает. Всё для людей.)
fori, всё должно работать, проблема в чём-то другом. ...upd Закинул в проект - всё работает. Вангую, что вместо функций-методов(как в примере) ты стрелочки у себя пытаешься использовать. |
Цитата:
|
Спасибо, оказалось что у меня одновременно было два вю екземпляра, но у меня все ище не получается использовать this из под директивы))
<script>
export default {
name: "Auth",
data() {
return {
page: 0,
};
},
methods: {
selectPage(number) {
if (number > this.page) {
alert(this.page);
} else {
alert(this.page);
}
this.page = number;
},
},
directives: {
animateShow: {
inserted: function animatePage(el, binding) {
if (binding.value.pageToShow < this.page ) { //this == undefined
el.style = "transform: translateX(-100%);";
el.style = "opacity:0;";
}
if (binding.value.pageToShow > this.page) { //this == undefined
el.style = "transform: translateX(100%);";
el.style = "opacity:0;";
el.style = "display:none;";
}
if (binding.value.pageToShow == this.page) { //this == undefined
el.style = "transform: translateX(0);";
el.style = "opacity:1;";
}
},
},
},
};
</script>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<!-- Загрузка React. -->
<!-- Внимание: во время развертывания, замените "development.js" на "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
</script>
</head>
<body>
<div id='root'></div>
<script>
'use strict';
const e = React.createElement;
class Primer extends React.Component {
constructor(props) {
super(props)
this.name = 'Иван'
this.getName = this.getName.bind(this)
}
getName() {
alert('Привет ' + this.name)
}
render() {
return e(
'button',
{onClick: this.getName},
this.props.children,
);
}
}
ReactDOM.render(
e(
Primer,
null,
'Вызов метода'
),
document.querySelector('#root')
);
</script>
</body>
</html>
|
Или вот так...
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<!-- Загрузка React. -->
<!-- Внимание: во время развертывания, замените "development.js" на "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
</script>
</head>
<body>
<div id='root'></div>
<script>
'use strict';
const e = React.createElement;
class Primer extends React.Component {
constructor(props) {
super(props)
this.name = 'Иван'
}
getName() {
alert('Привет ' + this.name)
}
render() {
return e(
'button',
{onClick: this.getName.bind(this)},
this.props.children,
);
}
}
ReactDOM.render(
e(
Primer,
null,
'Вызов метода'
),
document.querySelector('#root')
);
</script>
</body>
</html>
|
fori, директивы не предназначены для этого. Они должны быть независимы от компонента. Что-то можно достать из vnode, но не нужно. Передавайте page параметром директивы.
Цитата:
|
Aetae, спасибо, дерективы должны бить независимими от страницы или у каждой страницы может быть своя реализацыя одной и тойже директивы?
|
| Часовой пояс GMT +3, время: 21:09. |