【发布时间】：2021-02-21 05:57:16
【问题描述】：
我的组件 VUEJS 中的 v-for 有问题
如果我有一个促销活动，我需要在我的 div 中显示它，但如果我没有任何促销活动显示按钮来购买促销活动。
我已经完成了所有条件，但总是显示我没有促销活动，但在控制台中，没有，在网络浏览器控制台中，我可以通过促销显示我的 aray。
我附上了我的实际代码。
我不得不说我所有的代码都在 laravel 中。
路线：
Route::get('/getBonoUsuario', 'BonosController@getBonoUsuario')->name('getBonoUsuario');
控制器：
public function getBonoUsuario(){
$usuario = \Auth::user()->id;
$bonoUsuario = \DB::select(\DB::raw("SELECT *
FROM contratan, bonos
WHERE usuario = $usuario
AND contratan.bono = bonos.codBono
AND activo = 1 "));
return $bonoUsuario;
}
组件 vueJS
<template>
<div class="">
<table class="table table-hover table-striped tabla-bonos">
<thead>
<th>Id</th>
<th>Tipo</th>
<th>Minutos</th>
<th>Precio</th>
<th>Contratar</th>
</thead>
<tbody>
<tr v-for="data in bonosDisponibles" :key="data.id">
<td>{{ data.codBono }}</td>
<td>{{ data.tipo }}</td>
<td>{{ data.minutos }}</td>
<td>{{ data.precio }} €</td>
<td><button class="btn btn-danger contratar" @click="contratar(data.codBono)">Contratar</button></td>
</tr>
</tbody>
</table>
<div class="panel panel-info mt-5">
<div class="panel-heading">
Tipo de bono actual
</div>
<div class="panel-body" >
<div v-for="data in bonosUsuario" :key="data.id">
<div v-if=" data > 0 ">
Usted tiene contratado el bono: {{ data.tipo }} de {{ data.minutos }} min y aún le quedan {{ data.tiempoRestanteBono }} <br/> Si lo desea puede renovarlo haciendo click en este botón: <button class="btn btn-warning" @click="renovar">Renovar</button>
</div>
<div v-else>
<h3> Sin Bono activo </h3> Puede contratar uno haciendo click aquí <a href="/estadoBono"><button class="btn btn-danger">Contratar</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
bonosDisponibles: [],
bonosUsuario: [],
isOpen: false,
selectedItem: {},
};
},
created: function () {
this.cargar();
this.bonoUsuario();
},
methods: {
cargar: function () {
let url = "/getBonosDisponibles";
axios
.get(url)
.then((response) => {
this.bonosDisponibles = response.data;
})
.catch((error) => console.error(error));
},
bonoUsuario: function(){
let url = "/getBonoUsuario";
axios.get(url)
.then((response) => {
this.bonosUsuario = response.data;
console.log(this.bonosUsuario);
});
},
contratar: function(codBono){
if(codBono == 1){
let url = "/contrarBono30MinHome";
let bono = "Bono30Min";
axios.post(url, { bono: bono, codBono: codBono } )
.then(function (response) {
window.location.replace(response.data);
})
.catch(function (error) {
console.log(error);
});
}
if(codBono == 2){
let url = "/contrarBono1hHome";
let bono = "Bono1H";
axios.post(url, { bono: bono, codBono: codBono } )
.then(function (response) {
window.location.replace(response.data);
})
.catch(function (error) {
console.log(error);
});
}
if(codBono == 3){
let url = "/contrarBono5hHome";
let bono = "Bono5H";
axios.post(url, { bono: bono, codBono: codBono } )
.then(function (response) {
window.location.replace(response.data);
})
.catch(function (error) {
console.log(error);
});
}
if(codBono == 4){
let url = "/contrarBono10hHome";
let bono = "Bono10H";
axios.post(url, { bono: bono, codBono: codBono } )
.then(function (response) {
window.location.replace(response.data);
})
.catch(function (error) {
console.log(error);
});
}
if(codBono == 5){
let url = "/contrarBono24hHome";
let bono = "Bono24H";
axios.post(url, { bono: bono, codBono: codBono } )
.then(function (response) {
window.location.replace(response.data);
})
.catch(function (error) {
console.log(error);
});
}
},
renovar: function(){
let url = "/renovarBonoUsuario";
axios.post(url)
.then((response) => {
window.location.replace(response.data);
})
.catch((error) => console.error(error));
}
},
};
</script>
网络浏览器控制台
{data: Array(1), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
app.js:40771 [Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
【问题讨论】：