Question

我有一个简单的 admin 应用，可以通过表单创建新的商店并将它们添加到表格中。我已经创建了添加和删除条目的方法，但我不确定如何继续创建更新方法。内容是满足的，我想在保存按钮点击时保存。请参阅我的CodePen：http://codepen.io/Auzy/pen/177244afc7cb487905b927dd3a32ae61为此，我按照以下方式使用VueJS和Vuefire（原谅Bootstrap）：

  <!-- Table -->
  <table class="table table-striped">
  <tr>
    <th>Business Name</th>
    <th>Vanity URL</th>
        <th>Story</th>
    <th>Actions</th>
  </tr>
  <tr v-for="post in posts" :key="post['.key']">
    <td contenteditable v-model="newPost.title">{{post.title}}</td>
    <td>{{post.content}}</td>
        <td>{{post.story}}</td>
    <td>
              <button v-on:click="removePost(post)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</button>
  <button v-on:click="removePost(post)" type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</button>
        </td>
  </tr>
  </table>
</div>
</div>

和JS：

// Setup Firebase
let config = {
  ...firebase stuff...
}

let firebaseapp = firebase.initializeApp(config);
let db = firebaseapp.database();
let postsRef = db.ref('blog/posts')

// create Vue app
var app = new Vue({
  // element to mount to
  el: '#app',
  // initial data

  data: {
    newPost: {
      title: '',
      content: '',
            story: ''
    }
  },
  // firebase binding
  // https://github.com/vuejs/vuefire
  firebase: {
    posts: postsRef
  },
  // methods
  methods: {
      addPost: function () {
        postsRef.push(this.newPost);
        this.newPost.title = '';
        this.newPost.content = '';
        this.newPost.story = '';
      },
    removePost: function (post) {
      postsRef.child(post['.key']).remove()
            toastr.success('Business removed successfully')
    }
  }
})

Answer 1

您必须使用Private Sub NBInv_Change() If NBInv.Text = "0" Or NBInv.Text = "" Then ActiveSheet.Shapes("NFlow").Visible = False ElseIf NBInv.Value < NEBInv.Text And NBInv.Text < NEBInv.Text _ And NBInv.Text < EBInv.Text And NBInv.Text < SEBInv.Text _ And NBInv.Text < SBInv.Text And NBInv.Text < SWBInv.Text _ And NBInv.Text < WBInv.Text And NBInv.Text < NWBInv.Text Then ActiveSheet.Shapes("NFlow").Visible = True ActiveSheet.Shapes("FlowNFalse").Visible = False End If End Sub表示数组，$bindAsArray表示将firebase数据绑定到组件数据。

您可以使用$bindAsObject提供的$firebaseRefs来更新或修改端点。

以下是更新后的codepen。

我对您的代码进行了以下更改。

vuefire

在模板中：

// create Vue app
var app = new Vue({
  // element to mount to
  el: '#app',
  // initial data

  data: {
    posts: [], // All the business post to display
    newPost: {
      title: '',
      content: '',
      story: ''
    }
  },
  // methods
  methods: {
        addPost: function () {
            postsRef.push(this.newPost);
            this.newPost.title = '';
            this.newPost.content = '';
            this.newPost.story = '';
        },
        editPost: function(post) {
            // Set post values to form
            this.newPost = post
        },
        updatePost: function(post) {
            const childKey = post['.key'];
            /*
             * Firebase doesn't accept speacial chars as value
             * so delete `.key` property from the post
             */
            delete post['.key'];
            /*
             * Set the updated post value
             */
            this.$firebaseRefs.posts.child(childKey).set(post)
        }, 
        removePost: function (post) {
         postsRef.child(post['.key']).remove()
         toastr.success('Business removed successfully')
        }, 

  },
    // Explicitly set binding data to firebase as an array.
    created() {
        this.$bindAsArray('posts', postsRef);
    }
})

使用VueFire编辑Firebase数据

1 个答案: