Возможно ли связать значение с элементом 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, когда пользовательщелкает один из элементов автозаполнения.Который запускает функцию под названием «complete».

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
    }
  }
})

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

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