1 Тема від ping Востаннє редагувалося ping (07.06.2017 07:43:57)

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1266

Тема: vue.js - є питання

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">    
{{message}}
</div>
new Vue({
    el: "#app",
    data: {
        message: [1,2,3,]
    },
    methods: {
        getList: function () {
            var myGet = axios.get('/api/guests/.json')
                .then(function (response) {                    
// ????????? message = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });            
        }
    },
    created:function () {
        this.getList();
    }
});

https://jsfiddle.net/viach/sgsptyy6/1/
як мені переприсвоїтиприсвоїти нове значення для message?

Подякували: ostap34PHP1

2 Відповідь від sapientisat

  • sapientisat
  • Користувач
  • Поза форумом
  • Дата реєстрації: 01.12.2016
  • Повідомлень: 24
    • Репутація: 29

Re: vue.js - є питання

this.message = response.data

https://jsfiddle.net/qg3n59zb/

Подякували: ostap34PHP1

3 Відповідь від ping

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1266

Re: vue.js - є питання

sapientisat написав:

this.message = response.data

https://jsfiddle.net/qg3n59zb/

так , це працює.

але не у випадку виклику з-під axios, як у мене.

обновив https://jsfiddle.net/viach/sgsptyy6/3/    - на випадок помилки АПІ
тепер в обох випадках message повинно отримати нове значення.

Подякували: ostap34PHP1

4 Відповідь від sapientisat Востаннє редагувалося sapientisat (07.06.2017 12:37:01)

  • sapientisat
  • Користувач
  • Поза форумом
  • Дата реєстрації: 01.12.2016
  • Повідомлень: 24
    • Репутація: 29

Re: vue.js - є питання

ну тоді або так: https://jsfiddle.net/moL5uk0f/
або так: https://jsfiddle.net/4wu83vmp/

Чому не можана просто писати message = response.data ? Бо тоді ми звертаємося до глобальної змінної message, а нам треба змінити поле об'єкту. Тому треба писати this.message
У випадку анонімної функції, яку ти оголошуєш як function(){} this буде мати інший контекст і this не буде вказувати на наш об‘єкт, а знову ж таки буде вказувати на глобальний об‘єкт, якщо мене не підводить пам‘ять. Тому треба зберегти контекст this таким, який він нам потрібен, трохи раніше в стеку функцій. Що ми й робимо за допомогою var self = this. Це, вважай, один з патернів джаваскріпта, але завдяки ES6 він нам не потрібен в 99%  випадків.

Нові стрілочні функції беруть контекст з того місця, де їх створюють, на відміну від старого методу створення анонімних функцій.
І взагалі ES6 - це класно, зменшує кількісьт ось таких помилок.

Подякували: NaharD, ostap34PHP2