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

30byixjq 于 2023-02-13 发布在 Vue.js

关注(0)|答案(2)|浏览(208)

我使用v-model来处理表单中的输入，我必须更改它来绑定属性值，一开始input就像

<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在 prop 中出现。它有username。
当使用模型时，在data中，我定义了

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

而且它工作正常，但是在把它改成v-bind和v-on之后，
我的问题是，现在如何在方法中获取username的值？与过去一样，我将其作为this.username获取，以获取值并清除它，但现在如何在方法中获取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。我不能设置这个。username =""，它也不会从输入中删除。3。@input只得到你新键入的内容，而不是已经在那里的内容

vue.js

来源：https://stackoverflow.com/questions/54782010/using-v-bind-and-v-on-instead-of-v-model-vuejs

2条答案

按热度按时间

kpbwa7wx1#

v-model只是=〉的语法糖

<input :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);
  }
}

赞(0）回复(0）举报 2023-02-13

o8x7eapl2#

最好的解决方案是从props获取数据，并将其加载到v-models的表单中。
使用Vue组件的watch特性。
首先我添加了一些 prop

export default {
    props: ["vendorModelData"],

然后通过watch传递到v-model

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

在这种方式下，当 prop 改变时，它总是加载不同的。这样我就可以使用v-model，以及从 prop 加载数据到它。
我发现它对我很有用。

赞(0）回复(0）举报 2023-02-13

我来回答

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

2条答案

相关问题

热门标签

最新问答