Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.03.2021, 15:59
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

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>
Ответить с цитированием
  #2 (permalink)  
Старый 28.03.2021, 17:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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

Или "переопределить" this через "обычную" переменную... А потом ее использовать внутри метода.
Ответить с цитированием
  #3 (permalink)  
Старый 28.03.2021, 17:39
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

ksa, А могу ли я попросить пример пожалуйста))
Ответить с цитированием
  #4 (permalink)  
Старый 28.03.2021, 18:34
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

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

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

Последний раз редактировалось Aetae, 28.03.2021 в 18:39.
Ответить с цитированием
  #5 (permalink)  
Старый 28.03.2021, 19:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Aetae
Vue это сам из коробки делает. Всё для людей.
На React нужно через .bind()
Ответить с цитированием
  #6 (permalink)  
Старый 28.03.2021, 19:48
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Спасибо, оказалось что у меня одновременно было два вю екземпляра, но у меня все ище не получается использовать 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>
Ответить с цитированием
  #7 (permalink)  
Старый 28.03.2021, 19:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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>
Ответить с цитированием
  #8 (permalink)  
Старый 28.03.2021, 19:56
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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

<!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>
Ответить с цитированием
  #9 (permalink)  
Старый 28.03.2021, 20:08
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

fori, директивы не предназначены для этого. Они должны быть независимы от компонента. Что-то можно достать из vnode, но не нужно. Передавайте page параметром директивы.
Сообщение от ksa Посмотреть сообщение
На React нужно через .bind()
Всего лишь одна маленькая боль из 1000 и 1й с которой приходится сталкиваться после перехода на реакт, ага.)
__________________
29375, 35

Последний раз редактировалось Aetae, 28.03.2021 в 20:12.
Ответить с цитированием
  #10 (permalink)  
Старый 28.03.2021, 21:01
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как в проект vue cli добавить скрипт (в файле) fori Javascript под браузер 0 27.03.2021 18:23
vue cli, как маштабировать размер компонента под каждую страницу fori Javascript под браузер 2 24.03.2021 22:33
что такое defineComponent (vue cli) fori Javascript под браузер 1 22.03.2021 20:46
Локальное подключение компонентов vue? Lodas Библиотеки/Тулкиты/Фреймворки 0 11.04.2020 22:42
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40