时间戳

首页 > 解决方案 > 如何将 Vue 中的选定表单选项保存到 Firebase

javascript - 如何将 Vue 中的选定表单选项保存到 Firebase

问题描述

我有一个集合，我希望用户在 firebase 中选择该选项。

<select v-model="selected">
<option disabled value="">Marital Status</option>
<option>Married</option>
<option>Single</option>
<option>Divorced</option>
<option>Widow</option>
</select>

当我将表单选择与 profile.maritalStatus 绑定时，选择的选项将提交到 firebase 中的配置文件集合，但选择表单上的占位符不会显示在页面上。如何与 v-model="selected" 绑定并能够将其提交到配置文件集合。

data (){
selected:"",
profile:{
maritalStatus: null,
age: null, 
profession: null,
}
},

methods:{
Save(){   db.collection("profile").add(this.profile)
}
}

我想要这样的占位符

在此处输入图像描述

标签： javascriptfirebasevue.js

解决方案

var app = new Vue({
  el: '#app',
  data: {
    selected: ''
  },
  watch:{
   selected:function(){
     console.log('selected is ' +this.selected+" do you logic here");
   }
 }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
<div id="app">
<select v-model="selected">
    <option value="" disabled selected>Marital Status</option>
    <option>Married</option>
    <option>Single</option>
    <option>Divorced</option>
    <option>Widow</option>
</select>
Selected:{{selected}}
</div>
</body>

你在寻找这样的东西吗？

    <select name="maritalStatus" v-model="selected">
        <option value="" disabled selected>Marital Status</option>
        <option>Married</option>
        <option>Single</option>
        <option>Divorced</option>
        <option>Widow</option>
    </select>

此外，您可以添加一个观察者来调用 save()

watch:{
  selected:function(new,old){
   //write your logic here
  }
}

推荐阅读