Question

我在组件VUEJS中使用v-for的v-for问题

如果我有一个促销活动显示在我的div中，但如果我没有任何促销活动显示按钮来购买促销，则我需要。

我已经尽我所能，但始终表明我没有进行促销活动，但是在控制台中，没有，在Web浏览器控制台中，我可以通过促销来表现我的愿望。

我附上了我的实际代码。

我必须说我所有的代码都在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.

Answer 1

可能您应该以这种方式更改代码以实现它：

<div class="panel-body" >
    <div v-for="data in bonosUsuario" :key="data.id">
        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-if="bonosUsuario.length == 0">
        <h3> Sin Bono activo </h3> Puede contratar uno haciendo click aquí <a href="/estadoBono"><button class="btn btn-danger">Contratar</button></a>
    </div>
</div>

v-对于vueJS条件v-if

1 个答案: