如何使用vue-resource插件按需删除对象？

Question

使用vue-resource插件，它有一个这样的例子：

new Vue({

    ready: function() {

      var resource = this.$resource('someItem{/id}');

      // delete item
      resource.delete({id: 1}).then(function (response) {
          // handle success
      }, function (response) {
          // handle error
      });

    }

})

我有点困惑，这是在 ready 属性下，因为它表明它会在组件加载后立即运行并删除某些内容。我如何通过单击元素实际使用 resource.delete 函数？例如，我有这个：

<div @click="deleteReward(reward)" class="glyphicon glyphicon-trash pull-right"></div>

当前调用的是：

 deleteReward(reward) {
        this.rewards.$remove(reward);
        this.$http.delete('api/reward/' + reward.id).then(function (response) {
            console.log('deleted ' + reward.name);
        });
    },

但我的理解是我应该能够以某种方式调用 resource.delete 而不必明确指定 URL 和方法。我的假设错了吗？

我想要的是做类似 @click="reward.delete()" 的事情，让它知道自动调用 resource.delete 并让 resource.delete 接受奖励对象作为参数。

Answer 1

您可以尝试这样的操作：

new Vue({
  data: {
    resource: null
  },

  ready: function() {
    this.resource = this.$resource('api/reward{/id}')
  },

  methods: {
    deleteReward(reward) {
      this.resource.delete({id:reward.id}).then(function (response) {
        console.log('deleted ' + reward.name)
      })
    }
  }
})

然后：

<div @click="deleteReward(reward)"></div>

如何使用vue-resource插件按需删除对象？

How do I use the vue-resource plugin to delete an object on demand?

vue.js