Форум

fori · #1 (**permalink**) 28.03.2021, 15:59

Здраствуйте, в 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>

ksa · #2 (**permalink**) 28.03.2021, 17:32

fori, нужно еще "переприсвоить" метод через <метод>.bind(this)
Или так оформить его вызов...

Или "переопределить" this через "обычную" переменную... А потом ее использовать внутри метода.

fori · #3 (**permalink**) 28.03.2021, 17:39

ksa, А могу ли я попросить пример пожалуйста))

Aetae · #4 (**permalink**) 28.03.2021, 18:34

ksa, не нужно. Vue это сам из коробки делает. Всё для людей.)
fori, всё должно работать, проблема в чём-то другом.

...upd
Закинул в проект - всё работает. Вангую, что вместо функций-методов(как в примере) ты стрелочки у себя пытаешься использовать.

ksa · #5 (**permalink**) 28.03.2021, 19:37

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

Vue это сам из коробки делает. Всё для людей.

На React нужно через .bind()

fori · #6 (**permalink**) 28.03.2021, 19:48

Спасибо, оказалось что у меня одновременно было два вю екземпляра, но у меня все ище не получается использовать 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>

ksa · #7 (**permalink**) 28.03.2021, 19:54

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

А могу ли я попросить пример пожалуйста))

Я только на React могу показать...

<!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>

ksa · #8 (**permalink**) 28.03.2021, 19:56

Или вот так...

<!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>

Aetae · #9 (**permalink**) 28.03.2021, 20:08

fori, директивы не предназначены для этого. Они должны быть независимы от компонента. Что-то можно достать из vnode, но не нужно. Передавайте page параметром директивы.

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

На React нужно через .bind()

Всего лишь одна маленькая боль из 1000 и 1й с которой приходится сталкиваться после перехода на реакт, ага.)

fori · #10 (**permalink**) 28.03.2021, 21:01

Aetae, спасибо, дерективы должны бить независимими от страницы или у каждой страницы может быть своя реализацыя одной и тойже директивы?

Форум

Справочник

Discord чат

Курсы javascript