Почему не обновляются данные props vue js?

Question

[Михаил]

Данные получаю ajax запросом при нажатии на кнопку.
//Кнопка

<button id="show-modal"
    class="P2CL3TInfo"
     v-bind:name="selecId = item.id"
    @click="open()">
</button>

 <modal v-if="showModal" @close="showModal = false"
    :country="mod[0].country"
    :city="mod[0].city"
    :dt="mod[0].created" >
</modal>

//Компонент
Vue.component('modal', {
    props: ['country', 'city', 'vendor', 'dt'],
    data: function () {
      return {
      }
    },
    delimiters: ['${', '}'],
    template: '#modal-template',
//Ajax запрос
            open: function(){
                      axios.get("{% url 'url' %}",{
                          headers: {
                              'X-Requested-With': 'XMLHttpRequest'
                          },
                          params: {
                              id: this.selecId
                          }}).then((response) => {
                              this.$data.mod =  response.data
                              this.showModal = true
                          }).catch(function (error) {
                                  this.selected = error;
                              });
                  },

Почему когда показывается окно то данные не обновляются на новые?

Answer 1

[Igor Koch]

Потому что this не проходит в объект axios, инициализируйте перемененную, которая будет ссылкой на this.

Comments

[Михаил]

Вроде этого? var self = this
Данные в само mod обновляются, selecId тоже обновляется, но после первого показа окна с данными, при повторном открытии показывает старые данные, хотя пришли новые

[Алексей Черемисин]

Попробую подытожить.

open: function(){
       var self = this; /* Оно! далее используем self*/
                      axios.get("{% url 'url' %}",{
                          headers: {
                              'X-Requested-With': 'XMLHttpRequest'
                          },
                          params: {
                              id: self.selecId
                          }}).then((response) => {
                              self.$data.mod =  response.data
                              self.showModal = true
                          }).catch(function (error) {
                                  self.selected = error;
                              });
                  },

[Igor Koch]

Михаил:
Используйте Vue.set
Vue.set(self, 'mod', response.data);

[Михаил]

Алексей Черемисин: есть какой то другой способ узнать выбранную кнопку? Если они генерируются в цикле. Так как я понял что всем кнопкам присваивается самый последний item в цикле.

<tr v-for="item in selected">
                        <td style="text-align:center;">
                            <button id="show-modal"
                                class="P2CL3TInfo"
                                v-bind:naid="selecId = item.id" Вместо этого
                                @click="open()">
                            </button>
                            <button class="P2CL3TCart"></button>
                        </td>
                    </tr>

[Алексей Черемисин]

Михаил: Есть :-)
Можно просто в html
<button @click="open"></button>
и в JS

open: function(event) {
 console.log(event.target); // делаем с ним что нужно.
}

Например - jsfiddle.net/fboLd4m7/3

[Михаил]

Алексей Черемисин: Спасибо

Answer 2

[Алексей Шашенков]

this.$data.mod = response.data - так не надо
this.$set(this,'mod', response.data)
Про set и $set