Question

This is my code.

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

I need to run this jquery code inside created event of vue.

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

But unfortunately this is not running inside created event. But this is working fine inside watch event. so code may be correct but I think created event may do something to prevent the code from running. It would be great if someone can help. Final result I need is like this,

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

Answer 1

最后，我设法使用$ FormArray对其进行了修复。这是我的代码。以防万一有人发现它的用途。

chipList

Unable to change background-image: url of a link by jquery after axios

1 个答案: