vue.js - Vuejs - 如何使用 axios 在 api 的 url 中获取当前 id

Question

当客户端点击按钮时，我希望他阻止另一个客户端，所以我希望我的 id 是动态的：http://example/user/:id。

我的模板：

<template>
    <div class>
        <div v-for="post in posts" :key="post.id">
            <div>
                <div>{{ post.name }}</div>
                <div>{{ post.id }}</div>
                <button @click='BlockUser'>Block</button>
            </div>
        </div>
    </div>
</template>

还有我的脚本：

<script>
   const axios = require('axios');
   
   export default {
       name: 'User',
       data() {
           return {
               posts: [],
               errors: [],
               id: {
                   id: ""
               },  
           }
       },

       methods: {
           getData() {
               axios.get(`http://example/user`)
               .then(result => {
                   this.posts = result.data
                   console.log(result)
               })
           },

           BlockUser() {
               axios.get('http://example/user/blacklist/:id' + encodeURIComponent(this.id.id))
               .then(response => {
                   console.log(response)
               })
           },
       },
   }
</script>

最初，我在 data id 中为 id 设置了一个值，它起作用了。但是现在我放了一个空字符串。它返回一个未定义的

Answer 1

如果你的帖子里面有 user_id 字段，你可以将它传递给 BlockUser 方法，并在请求 url 中使用它。

<button @click='BlockUser(post.user_id)'>Block</button>

           BlockUser(user_id) {
               axios.get(`http://example/user/blacklist/${user_id}`)
               .then(response => {
                   console.log(response)
               })
           },