Question

我正在使用Axios和Vue练习使用WebApi。

我做到了：

我的模板：

  <template>
<form>
    <div>
        <div class="panel panel-default">
            <div class="panel-heading"><h1><strong>Lista de nombres</strong></h1></div>
            <div class="panel-body">

                <table class="table table-hover table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>Apellido Paterno</th>
                            <th>Apellido Materno</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="usuario in usuarios">
                            <td>{{usuario.Nombre}}</td>
                            <td>{{usuario.Apellido_P}}</td>
                            <td>{{usuario.Apellido_M}}</td>
                        </tr>
                    </tbody>
                </table>


            </div>
        </div>
        <br />
        <p>Buscar usuario</p>
        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control" v-model="busqueda" placeholder="Buscar usuario" />
                <button type="submit" class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>
            </div>
        </div>

    </div>
</form>
</template>

和我的剧本：

    <script>
    import axios from 'axios'

    export default {
        data() {
            return {
                usuarios:[],
                busqueda: ''
            }
        },

        methods: {
            buscarUsuario() {
                axios.get('http://localhost:50995/api/GetUsuario', {
                    params: {
                        'id' : 7
                    }
                }).then(response => {
                    this.usuarios = response.data
                    }).catch(e => {
                        console.log(e)
                    })
            },

            getUsuarios() {
                axios.get("http://localhost:50995/api/GetUsuarios")
                    .then(response => {
                        this.usuarios = response.data
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })

            }
        },

        created() {
                this.getUsuarios(),
                this.buscarUsuario()
        }


    }

</script>

方法getUsuarios（）运行良好;但方法buscarUsuario（）没有;只有当我在params'id'中输入一个数字时，我的WebApi的日志才会记录一个查询，但是如果写下这段代码：this.busqueda无效。无论哪种方式，页面中的结果都不能使用方法buscarUsuario（）。

最后朋友们，每次按下按钮时如何防止加载页面？

非常感谢！

Answer 1

这似乎有点奇怪。我总结你在服务器端正确阅读它。所以我打赌你的服务器只需要Number（7）而不是String（7）。您应该将 busqueda 的基本立场更改为null。然后将.number修饰符添加到v-model。像那样：

<input type="text" class="form-control" v-model.number="busqueda" placeholder="Buscar usuario" />

每次按下按钮时如何防止加载页面？ 添加.prevent修饰符。 变化：

<button type="submit" class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>

要：

<button type="submit" class="btn btn-default" v-on:click.prevent="buscarUsuario">Buscar</button>

另外我建议使用@作为v-on的快捷方式:(在本例中你可以使用@ click.prevent）。

如果它仍然刷新。添加@ submit.prevent =＆＃34; functionName＆＃34;形成......

Answer 2

使用不带引号的id和click.prevent来阻止提交。

params: {
  id: 7
}

<button type="submit" class="btn btn-default" v-on:click.prevent="buscarUsuario">Buscar</button>

你也可以使用button type =“buttton”

<button type="button" class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>

为什么Vue不使用axios和params显示来自我的WebApi的数据？

2 个答案: