Почему не отображается значение в input по нажатию на кнопку

Question

Проблема такая. Есть форма с полями.

<div id="app">
    <h2>Форма</h2>
    <div class="w3-modal-content w3-round-xlarge" style="width:50%">
    <div class="w3-container">
        <p><a @click="getdata()" class="w3-button">Отобразить</a></p>
        <p><input v-model="orgdata.fullname" class='w3-input w3-border w3-round-xlarge' type="text" style="width:97%" required><label>Полное наименование</label></p>
    </div>
    </div>

</div>

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

    getdata: function(){
        app.orgdata.fullname= "Тест";
        console.log(this.orgdata)
    },

Но в поле формы "Тест" на выводится. В чем дело?

Answer 1

Не работает потому, что вы, попросту, модифицируете свойство корневого объекта приложения(компонента), минуя систему реактивности.

В данном случае, если сильно нужно вы можете модифицировать свойства объектов, используя доступ через свойство $data как app.$data.orgdata.fullname, в противном случае лучше использовать ссылку на текущий контекст компонента - this как this.orgdata.fullname. Эти два варианта позволят вам сохранить реактивность и дадут возможность изменить любое свойство компонента, которое было объявлено в data свойстве компонента.

Также необходимо учитывать рекомендации по реактивности объектов:

const app = new Vue({
  el: '#app',
  data: () => {
    return {
      orgdata: {
        fullname: ''
      }
    }
  },
  methods: {
    getdata: function() {
      // здесь используем текущий контекст - this, чтобы реактивно изменить данные
      this.orgdata.fullname = "Тест2";
      console.log(this.orgdata)
    },
  },
})

// с помощью этого варианта, вы можете внести изменения в реактивный объект
// из-вне текущего компонента, но не стоит им злоупотреблять
app.$data.orgdata.fullname = "Тест";

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <h2>Форма</h2>
  <div class="w3-modal-content w3-round-xlarge" style="width:50%">
    <div class="w3-container">
      <p><a @click="getdata()" class="w3-button">Отобразить</a></p>
      <p><input v-model="orgdata.fullname" class='w3-input w3-border w3-round-xlarge' type="text" style="width:97%" required><label>Полное наименование</label></p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Почему не отображается значение в input по нажатию на кнопку

Ответы (1 шт):