如何在 Vue.js 中使用带有嵌套属性的 v-model

Posted 2023-02-22

【中文标题】如何在 Vue.js 中使用带有嵌套属性的 v-model

【英文标题】：How to use v-model with nested properties in Vue.js

【发布时间】：2020-01-01 15:04:23

【问题描述】：

我创建了一个表单，我正在尝试了解

这是我的模板的代码，如您所见，我正在尝试像这样引用嵌套属性：form.dobDate，但是我如何引用属性（dobDate 、dobMonth 和 dobYear）在 mounted 和 watch 中？这样我输入的任何内容都会在页面刷新时保留在那里？

<template>
  <div>
    <b-form novalidate>
      <b-form-select name="dobDate" id="dobDate" v-model="form.dobDate" :options="optionsDays"></b-form-select>

      <b-form-select name="dobMonth" id="dobMonth" v-model="form.dobMonth" :options="optionsMonths"></b-form-select>

      <b-form-input
        placeholder="Year of Birth"
        required
        autofocus
        class="form-control"
        name="year"
        id="year"
        min="0"
        max="2003"
        type="number"
        v-model="form.dobYear"
      ></b-form-input>

      <input type="text" v-model="name" />

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0"> form </pre>
    </b-card>
  </div>
</template>

这里是脚本代码：

<script>
export default 
  data() 
    return 
      name: "",
      form: 
        dobDate: 
          selected: ""
        ,
        dobMonth: 
          selected: ""
        ,
        dobYear: "",
        name: ""
      ,
      optionsMonths: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],
      show: true
    ;
  ,

  mounted() 
    if (localStorage.name) 
      this.name = localStorage.name;
    
  ,
  watch: 
    name(newName) 
      localStorage.name = newName;
    ,
    deep: true
  ,

  computed: 
    optionsDays() 
      return Array.from(Array(31).keys());
    
  ,

  methods: 
    onSubmit(evt) 
      evt.preventDefault();
      alert(JSON.stringify(this.form));
    ,
    getDates() 
      return Array.from(Array(31).keys());
    
  
;
</script>

如您所见，我有一个表单对象，其中包含要绑定的嵌套属性，并且我还使用 mounted() 和 watch在页面刷新或提交表单时将数据存储在本地存储中（目前没有验证）。

【问题讨论】：

您的代码似乎正确，有什么问题？

想了解在mounted方法中和观看时如何引用属性，以便页面刷新或提交时数据保留在页面上。

没有真正关注。不就是mounted中的this.form.dobDate吗？对于watch，您需要在属性键watch: 'form.dobDate' () ... 周围加上引号。

我试过了，但这不起作用，我做错了什么？：mounted() if (localStorage.name) this.name = localStorage.name; this.form.dobDate = localStorage.form.dobDate; ，观看： name(newName) localStorage.name = newName; , "form.dobDate"(newDate) localStorage.form.name = newDate; ，深：真，

localStorage 允许您存储字符串，而不是对象。您需要对它们进行适当的编码。一些背景阅读：developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

【参考方案1】：

您可以深入观察form（访问其嵌套字段）并使用以下方法遍历其值：

  Object.keys(after).forEach(key=>
          localStorage[key]=after[key]
       )

 watch: 
    form: 
      handler: function(after, before) 
        Object.keys(after).forEach(key=>
          localStorage[key]=after[key]
       )
      ,
      deep: true
    
   

【讨论】：

对不起，我不明白如何将其用于解决方案，像这样？观看：形式：处理程序（newval）localStorage = newVal； ，深：真 ，

是的，类似localStorage.name = newval.name;

谢谢，我最终使用了以下内容： handler: function(after, before) Object.keys(after).forEach(key => localStorage[key] = after[key]; ); ，深：真

不客气，我通过更好地解释来编辑我的答案