Возможно ли связать значение с элементом Vue в функции позже?

Question

Я создаю функцию автозаполнения. По сути, я не хочу связывать элемент следующим образом:

v-model="input"

При связывании элемента с помощью v-модели или v-bind мой входной элемент получает пустое значение.

Вместо этого я бы хотел, чтобы мой элемент мог выбирать старое значение или значение из базы данных, как показано в коде ниже. Я бы хотел привязать значение элемента к моей переменной с именем "input" только после загрузки страницы со всеми этими данными из БД. Приведенный ниже код прекрасно работает, но я должен использовать document.getElementById, чтобы обновить мой элемент с новым значением.

<div id="spvs" class="uk-form-controls">
     <input v-on:input="input = $event.target.value" v-on:keyup="getCompanies" name="company" id="company" class="uk-input {{$errors->has('company') ? ' uk-form-danger' : ''}}" placeholder="company name" 
            value="{{ old('company') || $errors->has('company')
                ? old('company') 
                : $property->getCompanyName()
            }}">

    <div v-if="spvs.length > 0" class="tm-autocomplete-box">
        <ul class="uk-list uk-list-striped tm-autocomplete-list">
            <li v-for="(spv, key) in spvs" @click="complete(key)"><span uk-icon="plus-circle" class="uk-margin-right"></span> @{{ spv.name }}</li>
        </ul>
    </div>
</div>

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

methods:{
        complete: function(key){
            this.input = this.spvs[key].name;
            document.getElementById('company').value = this.input;
            this.spvs = '';
        },

Так что это строка, которую я хотел бы заменить на новую привязку:

document.getElementById('company').value = this.input;

Answer 1

Итак, вы хотите, чтобы ваш input иметь старое значение при загрузке компонента, а затем вы хотите обновить значение. Пока вы можете использовать v-model как ниже.

Когда компонент загружается, вход будет иметь старое значение, которое вы хотите установить, а также вы можете обновить значение:

<div id="app">
  <input type="text" v-model="oldValue">
</div>

new Vue({
  el: "#app",
  data: {
    oldValue: 'value from Database'
  }
})

Если вы хотите другой путь, это:

<div id="app">
  <input type="text" :value="oldValue" @input="changeValue">
  <hr>
  The value of input is: {{oldValue}}
</div>

new Vue({
  el: "#app",
  data: {
    oldValue: 'value from Database'
  },
  methods: {
    changeValue(newValue) {
      this.oldValue = newValue.target.value
    }
  }
})

Смотрите в действии первый пример

Смотрите в действии второй пример