Question

我已填充记录，并且每行都有一个关注按钮v-on:click="unfollow(dynamic_value)"

我希望在点击和成功的Ajax响应之后将按钮更改为“关注”，如

我不知道如何在vue中这样做。

感谢任何帮助。

Answer 1

我建议您为记录创建一个组件（请参阅https://vuejs.org/v2/guide/components.html）

您可以使用名为＆＃34的布尔值为每条记录创建一个组件;然后是＆＃34;在组件的数据和v-on：click指令中写入三元条件，其中两个方法都将进行ajax调用，而成功回调则会改变布尔值的状态。

 Vue.component('follow-btn', {
  template: '#follow-btn-template',
  data: function () {
    return {
      followed: false
    }
  },
  methods: {
    follow: function (dynamic_value) {
      // Ajax call and on success => change this.followed to true
    },
    unfollow: function (dynamic_value) {
      // Ajax call and on success => change this.followed to false
    }
  }
})

<script id='follow-btn-template' type="text/x-template">
  <button v-on:click="followed ? unfollow(dynamic_value) : follow(dynamic_value)">
    {{followed ? 'Following' : 'Follow'}} 
  </button>
</script>

或使用条件指令

<script id='follow-btn-template' type="text/x-template">
  <button v-if="followed" v-on:click="unfollow(dynamic_value)"> Following</button>
  <button v-else v-on:click="follow(dynamic_value)"> Follow</button>
</script>

对于ajax调用，您可以使用jQuery，vue-resource或Axios。

vue js - 在Ajax响应之后更改行的按钮

1 个答案: