1

Добрый день. Есть такой экземпляр

new Vue ({
  el: '#app',
  data: {
  	title: 'Hello World!',
    link: 'http://google.com'
  },
  methods: {
  	changeTitle: function(event) {
    	this.title = event.target.value;
    },
    sayHello: function() {
    	this.title = 'Andrey';
    	return this.title;
    },
    link_method: function() {
    	return this.link;
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <h1 v-once>{{ title }}</h1>
   <p>{{ title }}</p>
  <input type="text" v-on:input="changeTitle">
  <p>{{ sayHello() }}</p>
  <a v-bind:href="link_method()">Google</a>
</div>

И если запустить код на выполнение и в поле ввода что-то написать, то ни чего не поменяется. Хотя метод changeTitle наоборот способствует тому, чтоб текст изменялся везде, где это нужно. Но...

Если в методе sayHello удалить строку this.title = 'Andrey'; - то все работает так, как и планировалось. Вопрос - почему так происходит?

У меня есть такое объяснение, что изменение данной this.title влияет на все моменты её упоминания и т.к. она была упомянута в методе, который её возвращает, то и соответственно он пускается на выполнение каждый раз когда происходит изменение this.title. - Такое может быть полным бредом, но пока это единственное разумное для меня объяснение данного поведения.

С кодом можно тут поиграться клик

2 ответа 2

0

Вся беда в том что вы в методе sayHello пишите:

this.title = 'Andrey';
return this.title;

И потом вызываете его на странице, и каждый раз когда вы работаете с инпутом отрабатывает метод sayHello который перебивает значение.

И советую лучше инпут переделать на модель:

<input type="text" v-model="title">

И тогда метод changeTitle не нужен, v-model работает по таком же принципу.

3
  • Вот штука-то и в том, что хочется понять по какой причине он каждый раз отрабатывает? Ведь за изменение input отвечает совсем другой метод и данный ни как с ним не связан.
    – chatlanin
    1 мая 2017 в 8:16
  • Каждый раз он отрабатывает потому что он выводится на странице и когда меняется атрибут titile этот метод тоже вызывается чтобы отобразится с новыми данными
    – TheMY3
    1 мая 2017 в 8:23
  • По какой причине этот метод вызывается при изменении инпута, если за это отвечает совсем другой метод? Ну т.е. не стоит полностью передавать и цитировать мой собственный ответ. Т.к. объяснение, что он вызывается по тому, что он отображается на странице - не объяснение. С таким же успехом можно написать, что он вызывается по тому, что он есть. Если моё умозаключение верно, то так и скажите что оно верно, а не перефразируйте его. Если же нет, то если знаете - дайте разумно-техническое объяснение данному поведению.
    – chatlanin
    1 мая 2017 в 8:43
0

К каждому экземпляру компонента приставлен связанный с ним экземпляр наблюдателя, который помечает все поля, затронутые при рендеринге компонента, как зависимости. В дальнейшем, когда вызывается сеттер поля, помеченного как зависимость, этот сеттер уведомляет наблюдателя, который в свою очередь инициирует повторный рендеринг компонента.

Это из оф.док-ции. Т.е. мое предположение было верным. При изменении свойств компонента - это циклически затрагивает все вещи связанные с этим компонентом.

Используем this.$set.title вместо this.title

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.