javascript Vue.js 2，我是否必须使用多个v-model来将值绑定到表单组件？

hujrc8aj 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(140)

我正在制作这个基本的表单组件，其中包含名字、姓氏、电子邮件、电话号码输入字段，但我尝试将user对象传递给它，以便使用一个v模型来预填充和更改数据。
我的准则。

<div> 
   <myForm v-model="user" />
 </div>

我看到在线处理多个值的方式。

<div> 
   <myForm v-model:firstName="user.firstName" v-model:lastName="user.lastName"
v-model:email="user.email" v-model:phone="user.phone" />
 </div>

是否有一种方法可以处理通过v模型传递的对象并更新它，或者我必须在第二个代码示例中列出我希望在该对象中更改的内容？

JavaScript

来源：https://stackoverflow.com/questions/75735174/vue-js-2-do-i-have-to-use-multiple-v-models-for-to-bind-values-to-a-form-compon

1条答案

按热度按时间

4xrmg8kj1#

您可以按照以下方法创建React式模型。

<template>
  <input
    type="text"
    placeholder="Firstname"
    v-model="reactiveValue.firstName"
  />
  <!-- Your form code -->
</template>
<script>
export default {
  name: "App",
  components: {},
  props: {
    value: {
      type: Object,
      default: () => ({
        firstName: "",
        lastName: "",
        email: "",
        phone: "",
      }),
    },
  },
  data() {
    return {};
  },
  computed: {
    reactiveValue: {
      get() {
        return this.value;
      },
      set(value) {
        console.log(value);
        this.$emit("input", value);
      },
    },
  },
};
</script>

那就叫它：

<myForm v-model="user" />

它使用计算的特性来创建被动数据。

赞(0）回复(0）举报 2023-03-16

我来回答

javascript Vue.js 2，我是否必须使用多个v-model来将值绑定到表单组件？

1条答案

相关问题

热门标签

最新问答