试图一次又一次停止加载相同的组件

Question

关于代码

使用Laravel 5.8和Vue.js组件。

问题详细信息

共有3个标签。当我单击组件1时，它将加载。然后，我单击组件2，它会加载。到目前为止，一切都还好。

当我回到组件1时，它将再次加载该组件。这里的问题是，由于每次单击该选项卡时组件都在加载，所以有验证码会再次从服务器获取响应代码。

我可以在第一次后停止加载组件吗？我的意思是，我只想重用已加载的html。

主要组件

<template>    
    <div class="container-fluid">
        <b-tabs pills card vertical>
            <b-tab title="Main" active>
                <profile></profile>
            </b-tab>
            <b-tab title="Comp 1" @click="setComponent('comp1')">
                <component :is = "comp1"></component>
            </b-tab>
            <b-tab title="Comp 2" @click="setComponent('comp2')">
                <component :is = "comp2"></component>
            </b-tab>
        </b-tabs>
    </div>
</template>

<script>        
    export default {
        methods: {
            setComponent(name) {
                if(name == "comp1") {
                    this.comp1 = name;
                }
                else {
                    this.comp2 = name;
                }
            }
        },
        data() {
            return {   
                comp1: '', comp2: ''
            }
        }
    }
</script>

组件-Comp 1

<template>    
    <div class="container">
        Comp 1 rendered
        <vue-recaptcha  
            :sitekey="My Site Key"> 
        </vue-recaptcha> 
    </div>
</template>

组件-Comp 2

<template>    
    <div class="container">
        Comp 2 Rendered
        <vue-recaptcha  
            :sitekey="My Site Key"> 
        </vue-recaptcha> 
    </div>
</template>

Answer 1

您可以添加<form id="add_produc" method="post" class="addProduct" name="add_produc" action="" enctype="multipart/form-data" > <table class="table table-bordered"> <tr> <th class="head" colspan="2">Edit</th> </tr> <tr> <td><label for="Name">Name:</label></td> <td> <input type="text" name="product_name" value="<?= $data['product_name']?>" id="product_name" class="form-control" placeholder="Name"> </td> </tr> <tr> <td> <label for="Description">Description:</label> </td> <td> <input type="text" name="product_description" value="<?= $data['product_description']?>" id="product_description" class="form-control" placeholder="description"> </td> </tr> <tr > <td><label for="Photo">Photo:</label> </td> <td> <div id="addField0"> <input type="file" name="product_photo[]" id="product_photo" class="form-control" accept="image/*"><br> </div> <button id="add-more-edit" name="add-more-edit" class="btn btn-primary">Add More</button> </td> </tr> <?php if(!empty($image)){ foreach ($image as $result){ ?> <tr class='imagelocation<?= $result->product_image_id ?>'> <td colspan="2" align='center'> <input type="text" name="product_image_id" value="<?= $result->product_image_id?>" id="product_image_id" class="form-control"> <input type="file" name="image" id="image" class="form-control images<?php echo $result->product_image_id ?>" accept="image/*" onchange="javascript:editimage(<?php echo $result->product_image_id ?>)"> <img class='img-rounded' height="50" width="50" src="<?= base_url('/assets/uploads/products/'.$result->product_photo)?>" style="vertical-align: middle;"> <span style="cursor:pointer;" onclick="javascript:deleteimage(<?php echo $result->product_image_id ?>)">X</span> </td> </tr> <?php } }else{ echo '<div class="empty">No Products Found...!</div>'; } ?> <tr> <td colspan="2"> <input type="hidden" name="sub_category_id" value="<?= $data['sub_category_id']?>" id="sub_category_name" class="form-control"> <input type="submit" name="update_product" id="update_product" class="btn btn-info btn-small" value="Update"> </td> </tr> </table> </form> ，使组件不被破坏重新创建

keep-alive

此后，两个子组件中都将有两个新的钩子，分别是 activated 和 deactivated 。