时间戳

首页 > 解决方案 > 无法更改背景图像：在 axios 之后 jquery 链接的 url

jquery - 无法更改背景图像：在 axios 之后 jquery 链接的 url

问题描述

这是我的代码。

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="el">
            <input type="text" v-model="input.model"/>
            <div v-for="item in items">
                <a href="" class="image-wrapper background-image">
                    <img src="https://www.google.lk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="">
                </a>
            </div>
        </div>

        <script src="http://themestarz.net/html/craigs/assets/js/jquery-3.3.1.min.js"></script>
        <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#el',
                delimiters: ["[[", "]]"],
                data: {
                    input: {
                        sorting: "",
                        brand: "all",
                        model: "all",
                    },
                    items: null,
                },
                watch: {
                    input: {
                        handler(newInput) {
                            axios.get('http://api.fightpoverty.online/api/city?page=2')
                                    .then(response => {
                                        this.items = response.data;
                                        console.log(JSON.parse(JSON.stringify(response.data)));

                                        $(".background-image").each(function () {
                                            $(this).css("background-image", "url(" + $(this).find("img").attr("src") + ")");
                                        });
                                    });
                        },
                        deep: true
                    }
                },
                created: function () {
                    axios.get('http://api.fightpoverty.online/api/city?page=2')
                            .then(response => {
                                this.items = response.data;
                                console.log(JSON.parse(JSON.stringify(response.data)));

                                $(".background-image").each(function () {
                                    $(this).css("background-image", "url(" + $(this).find("img").attr("src") + ")");
                                });
                            });
                }
            });
        </script>
    </body>
</html>

我需要在 vue 的 created 事件中运行这个 jquery 代码。

$(".background-image").each(function () {
                                        $(this).css("background-image", "url(" + $(this).find("img").attr("src") + ")");
                                    });

但不幸的是，这并没有在 created event 中运行。但这在 watch event 中运行良好。所以代码可能是正确的，但我认为 created 事件可能会阻止代码运行。如果有人可以提供帮助，那就太好了。我需要的最终结果是这样的，

<a class="image-wrapper background-image" style="background-image: url('https://www.google.lk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png');">
    <img src="https://www.google.lk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="">
</a>

标签： jqueryvue.jsaxios

解决方案

最后我设法使用 $ 修复它(document).ready()。这是我的代码。保留这个以防有人发现它的用途。

axios.get('http://api.fightpoverty.online/api/city?page=2')
                            .then(response => {
                                this.items = response.data;
                                $(document).ready(function () {
                                    $(".background-image").each(function () {
                                        $(this).css("background-image", "url(" + $(this).find("img").attr("src") + ")");
                                    });
                                });
                            });

推荐阅读