使用Vue.js从HTML <select multiple>将文档参考存储在Firebase中

时间:2019-07-03 18:06:18

标签: firebase vue.js vuefire

我正在尝试使用Vue.js + Firebase创建一个引用数组。在使用多个的SELECT INPUT中,当我尝试存储时,它(显然)创建了一个数组,因此我的引用不起作用。我知道为什么,但是我不知道如何解决。当来自SELECT的OPTIONS输入要转到Firebase的字段时,它将抓取到Array,因此我的参考链接看起来像是“ todos / Item1,Item2,Item3”……很抱歉,如果这是一个新手问题,但我刚开始vue.js和firebase。谢谢。

HTML:

<form class="new-todo-form">          
        <label class="new-todo-label">
          Day and Hour
          <input v-model="date" type="date" class="new-todo-input"/>
        </label>

        <label class="new-todo-label">
          Participantes:
          <select v-model="participants" class="select-input" multiple>
             <option v-for="todo in todos" v-bind:value="todo.institution">{{todo.institution}}</option>
          </select>
        </label>       


        <button type="submit" @click.prevent="addTest()" class="new-todo-button">Add</button>
</form> 


addTest() {
      testsCollection.doc(this.date).set({
        id: this.tests.length,
        date: this.date,  
        participants: todosCollection.doc('todos/' + this.participants),
      })
      .then(function(docRef) {
        console.log("Document written with ID: ", docRef.id);
      })
      .catch(function(error) {
        console.error("Error adding document: ", error);
      });
    },   

控制台错误:

[Vue warn]: Error in v-on handler: "FirebaseError: [code=invalid-argument]: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: an array"

found in

---> <App> at src/App.vue
       <Root> vue.esm.js:628
FirebaseError: "Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: an array"
    FirestoreError index.cjs.js:352
    validateType index.cjs.js:673
    validateArgType index.cjs.js:574
    doc index.cjs.js:21267
    addTeste App.vue:481
    click App.vue:386
    VueJS 3

0 个答案:

没有答案