Question

我有一个带有某种形式的组件，在输入内容时我需要为其实现数据自动保存。如何将v-model =“ titleName”的示例应用于v-model =“ article.title [currentLanguage]”？

P.S。 currentLanguage来自商店

<div id="app">
  Title is <input type="text" name="titleName" id="titleName" v-model="titleName">
   Title is <input type="text" name="article" id="article" 
v-model="article.title.en">
</div>

<script>
var app = new Vue({
  el:'#app',
  data: {
    titleName: '',
      article: {
        title: {
           en: null,
           ru: null
        }
     }
  },  
  computed: {
    availableLanguages() {
      return this.$store.state.languages;
    }
  },
  created() {
    this.setDefaults();
  },  
  mounted () {
   const SAVED = localStorage.getItem('content')
    if (SAVED) {
      this.titleName = SAVED
    }
  },  
  watch: {
    titleName(newTitleName) {
      localStorage.content = newTitleName;
    }
  }
</script>

https://codepen.io/pershay/pen/EJQGGO

Answer 1

只需使用localStorage.setItem('titleName', newTitleName)和localStorage.getItem('titleName')

您无需在已装载的装载。将其放在数据函数本身中。我认为这是更好的方法：

var app = new Vue({
  data:() => ({
    titleName: localStorage.getItem('titleName'),
    article: JSON.parse(localStorage.getItem('article'))
  }),
  watch: {
    titleName(newTitleName) {
      localStorage.setItem('titleName', newTitleName)
    },
    article(newArticle) {
        handler: function(newArticle) {
            localStorage.setItem('article', JSON.stringify(newArticle))
        },
        deep: true
    },
  }

上面的示例还包括一个深层对象监视。

Vue。使用本地存储自动保存输入值

1 个答案: