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

Question

I have a collection that I want the option selected by the user submitted to in 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>

When I bind the form select with profile.maritalStatus, the option selected will be submitted to profile collection in firebase, but the placeholder on the select form won't show on the page.当我将表单选择与 profile.maritalStatus 绑定时，选择的选项将提交到 firebase 中的配置文件集合，但选择表单上的占位符不会显示在页面上。 How can I bind with v-model="selected" and be able to submit it to the profile collection.如何与 v-model="selected" 绑定并能够将其提交到配置文件集合。

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

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

I want a placeholder like this我想要一个这样的占位符

在此处输入图片说明

Answer 1

 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>

Are you looking for something like this?你在寻找这样的东西吗？

    <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>

Additionally you can add a watcher to call save()此外，您可以添加一个观察者来调用 save()

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

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

问题描述

1 个解决方案

解决方案1
0 2020-10-04 15:04:36

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

问题描述

1 个解决方案

解决方案1 0 2020-10-04 15:04:36

解决方案1
0 2020-10-04 15:04:36