以后是否可以将值绑定到函数中的 Vue 元素？

Question

我正在构建一个自动完成功能基本上，我不想像这样绑定元素：

v-model="input"

使用 v-model 或 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>

理想情况下，当用户单击自动完成项之一时，我会将元素值绑定到我的“输入”变量。它运行一个名为“完成”的函数。

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

See in action the first example

See in action the second example