Question

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

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

System.out.println("Kilograms       Pounds");  
final double pounds = 2.2;

for (int kilo = 1; kilo < 200; kilo += 2){

   System.out.println(kilo + "      " + (kilo*pounds));
   }

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

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}
]

这是我的Vuejs代码：

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

我做错了什么？感谢。

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)
                }
)};

Vuejs + Laravel阵列问题

2 个答案: