代码之家 › 专栏 › 技术社区 › Junaid Farooq

使用v-bind和v-on而不是v-model vuejs

vuejs2 vue.js

2

Junaid Farooq · 技术社区 · 7 年前

我使用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 ,

我的问题是我现在如何才能得到 用户名 在方法上?就像过去一样,我得到它 this.username 要获取值并清除它,但现在我如何才能将username输入

methods: {}

我有一个保存输入的按钮

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

什么时候? validateFormAndSave 打电话给我 this.用户名 现在我不能得到价值?但是Vue医生说 v-model 和 v-bind:value &安培; v-on:input 是一样的吗?

更新:

用户名中可能已经存在某些值,也可能不存在,因为它被填充了 props 价值,所以 v-on:input="username = $event.target.value" 不获取已写入的值,而是输入的唯一新值?还是编辑?为什么会这样?有没有什么方法可以只获取任何人在其中键入的内容或已经键入的内容?

更新:

这变得很模糊了。所以现在。一。我可以设定 v绑定:值 ,但如果不进行编辑,我就无法在方法中获取它。 2。我无法设置此项。用户名=“”也不会从输入中删除。三。@输入只获取新输入的内容,而不是已经输入的内容

0 回复 | 直到 7 年前

1

2

Riddhi 7 年前

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

2

0

Junaid Farooq 7 年前

最好的解决方案可能是从props获取数据,并将其加载为 v-models .

使用 watch Vue组件的功能。

首先我添加了道具

  export default {
    props: ["vendorModelData"],

然后我把它通过 看 到 v-model

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

这样,当道具更换时,它的负载总是不同的。我就用这种方法 V-模型 以及从道具加载数据。

我发现它对我有用。