Question

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

v-model="input"

使用v-model或v-bind绑定元素，为我的input元素提供一个空值。

相反，我希望我的元素能够从数据库中获取旧值或值，如下面的代码所示。我只想将元素的值绑定到名为＆＃34; input＆＃34;的变量。在页面加载了来自DB的所有这些数据之后。下面的代码效果很好，但我必须使用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>

理想情况下，我会将元素值绑定到我的输入＆＃39;用户单击其中一个自动完成项时的变量。其中包含一个名为＆＃39; complete＆＃39;。

的函数

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

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

1 个答案: