使用 v-bind 和 v-on 代替 v-model vuejs答案

【问题标题】：Using v-bind and v-on instead of v-model vuejs使用 v-bind 和 v-on 代替 v-model vuejs
【发布时间】：2019-02-20 08:37:53
【问题描述】：

我使用 v-model 来处理表单中的输入，我不得不将其更改为绑定 props 值，起初输入就像

<input type="text" class="form-control" placeholder="" v-model="username">

现在看起来像

<input type="text" class="form-control" placeholder="" v-bind:value="modelData.username" v-on:input="username = $event.target.value">

modelData 即将加入道具。它有username。

当使用模型时，在data，我已经定义了

data: () => {
  return {
    username: ""
  }
},

它工作正常，但在将其更改为 v-bind 和 v-on 后，

我的问题是我现在如何在方法中获取 username 的值？和过去一样，我将它作为this.username 获取值并清除它，但现在我如何在

中获取用户名

methods: {}

我有一个保存输入的按钮

<button class="btn btn-secondary" type="button" @click="validateFormAndSave($event)">Save</button>

当validateFormAndSave 被调用时，我现在可以拥有this.username 我无法获得价值？但是 Vue 文档说 v-model 和 v-bind:value& v-on:input 是一样的吗？

更新：

用户名中可以有也不能有一些值，因为它被props值填充，所以v-on:input="username = $event.target.value"没有得到已经写入的值，而是你输入的唯一新值？或编辑它？为什么会这样？有什么方法可以让任何人在那里输入或已经输入的内容？

更新：

这变得非常模棱两可。所以现在。 1.我可以设置v-bind:value，但是不编辑就无法在方法中获取。 2. 我无法设置 this.username = "" 并且它也不会从输入中删除。 3. @input 只获取您新输入的内容，而不是那里已有的内容

【问题讨论】：

你为什么把它改成v-bind呢？
我正在使用一种相同的表单来添加和更新。因此，当在更新中打开表单时，我会将来自道具的数据附加到输入表单
如果数据中有用户名，则可以访问this.username。
我在数据中有用户名，但我没有使用v-model，我也无法访问 this.username

标签： vue.js vuejs2

【解决方案1】：

v-model 只是 =>

的语法糖

:value="modelValue" @input="modelValue = $event.target.value"

如果你想要别的东西，这很容易做到。只需将更新端更改为 onInput，所以 =>

<input  class="form-control
    :value="username" 
    @input="username = $event.target.value" >
data: () => {
  return {
    username: ""
  }
},
mounted() 
{ 
  this.username = this.modelData.username;
},
methods:{
  consoleUsername() {
    console.log(this.username);
  }
}

【讨论】：

好的，谢谢，我有一个问题。假设您已经为用户名绑定了一个值？然后你想得到它？ @input 正在处理当您更改输入时，您如何获取已经放置在那里的值？
我也有这个<input type="text" class="form-control" placeholder="" v-bind:value="modelData.username" v-on:input="username = $event.target.value">，我也有username的数据，但我也不能有this.username
您可以在数据对象中设置与 =>mounted() { this.username = this.modelData.username; 相同的 prop 值}.检查我编辑的答案。
知道 props 来自父组件的事实吗？它们仍然可以设置在安装上吗？当子组件被挂载时。 modelData.username 甚至还没有设置。那么它将如何工作？

【解决方案2】：

最好的解决方案是从 props 获取数据并将其加载为v-models 的表单。

使用 Vue 组件的watch 功能。

首先我添加了道具

  export default {
    props: ["vendorModelData"],

然后我将它通过watch 传递给v-model

watch: {
  vendorModelData() {
    this.updatePropsValue(this.vendorModelData)
    console.log("data updated")
  }
},

这样，当 Props 发生变化时，它总是以不同的方式加载。这样我就可以使用v-model 并将数据从道具加载到它。

我发现它对我很有用。

【讨论】：