Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   this.data не работает в vue cli (https://javascript.ru/forum/css-html/82183-data-ne-rabotaet-v-vue-cli.html)

fori 28.03.2021 15:59

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>

ksa 28.03.2021 17:32

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

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

fori 28.03.2021 17:39

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

Aetae 28.03.2021 18:34

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

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

ksa 28.03.2021 19:37

Цитата:

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

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

fori 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 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 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 28.03.2021 20:08

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

Сообщение от ksa (Сообщение 534992)
На React нужно через .bind() :-?

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

fori 28.03.2021 21:01

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


Часовой пояс GMT +3, время: 16:25.