Question

我正在使用v模型以某种形式处理输入，我不得不更改它以绑定道具值，起初输入就像

<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 Doc说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仅获得您新键入的内容，而不包含其中已经存在的内容

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

Answer 2

最好的解决方案是从道具中获取数据并为v-models加载表单。

使用Vue组件的watch功能。

首先我添加了道具

  export default {
    props: ["vendorModelData"],

然后我将其通过watch到v-model

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

这样，在更改道具时，它始终加载不同。这样，我就可以使用v-model并将道具中的数据加载到其中。

我发现它对我有用。

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

2 个答案: