Vuejs + Laravel数组问题

Question

我的问题是我正在尝试从 Axios 查询循环和数组到我的刀片模板中，查询没有给我任何错误，但告诉我在我的选择标签上多次未定义。

我有一个简单的 Axios 查询来自我的 Laravel 控制器：

public function consultaPersonas()
{
    $consulta = persona::all();
    if(!$consulta) {
        $consulta = ['error' => 'No hay registros'];
    }
    return $consulta;
}

这个

查询将给我带来这个小数组：

[
    {"cedula":"15678453","nombre":"LUIS CHACON","edad":30},
    {"cedula":"2536524","nombre":"MARIO ORTEGA","edad":21},
    {"cedula":"25632541","nombre":"VANESSA ALCALA","edad":24}
]

这是我想要循环的选择标签：

<select class="form-control" v-model="nombre">
    <option v-for="nom in nombre">@{{ nombre }}</option>
</select>

这是我的 Vuejs 代码：

var app = new Vue({
            el: '#root',
            data: {
                cedula: '',
                nombre: [],
            },
            watch: {
                cedula: function() {
                    this.nombre = ''
                    if (this.cedula.length == 1) {
                        this.buscarCedula()
                        this.nombre = "Consultando cédula...";
                    }
                }
            },
            methods: {
                buscarCedula: _.debounce(function() {
                    axios.get('http://localhost/miapp/public/personas/mostrar')
                        .then(function(response) {
                            let datos = response.data;
                            let validar = datos.error;
                            if (!validar) {
                                app.nombre =
                                    datos.cedula + ' - ' +
                                    datos.nombre + ' - ' +
                                    datos.edad;
                            } else {
                                app.nombre = validar;
                            }
                        })
                        .catch(function(error) {
                            app.nombre = error;
                        })
                }, 500)
            }

我做错了什么？谢谢。

Answer 1

js：

created():
    axios.get('http://localhost/miapp/public/personas/mostrar')
    .then(function (response){
        this.nombre = response.data;
    }).catch(function (error) {
        console.log(error);
    })

.html：

<select class="form-control" v-model="nombre">
    <option v-for="nom in nombre">@{{ nom.nombre }}</option>
</select>

接下来，从创建的方法调用 axios 转移到方法，并在创建中调用此方法。这将初始化您的初始数据

Answer 2

我找出出了什么问题，

我有两个问题，一个是我的视图标签变量，这是正确的方法，因为我需要使用他的索引遍历我的 nom 对象，如下所示：

<select class="form-control" v-model="nombre">
    <option v-for="nom in nombre">@{{ nom.cedula }}</option>
</select>

第二个问题是我在 Vuejs 文件中返回，我将一个输出返回到循环中，这是正确的方法：

    var app = new Vue({
                el: '#root',
                data: {
                    cedula: '',
                    nombre: [],
                },
                watch: {
                    cedula: function() {
                        this.nombre = ''
                        if (this.cedula.length == 1) {
                            this.buscarCedula()
                            this.nombre = "Consultando cédula...";
                        }
                    }
                },
                methods: {
                    buscarCedula: _.debounce(function() {
                        axios.get('http://localhost/miapp/public/personas/mostrar')
                            .then(function(response) {
                                if (!response.data.error) {
                                    return app.nombre = response.data;
                                } else {
                                   return app.nombre = response.data.error;
                                }
                            })
                            .catch(function(error) {
                                app.nombre = error;
                            })
                    }, 500)
                }
)};