将 JS 值插入 Django 模板答案

【问题标题】：Insert JS value to Django template将 JS 值插入 Django 模板
【发布时间】：2021-02-07 18:47:55
【问题描述】：

在探索 Web 开发时，我需要一些帮助。就我而言，我有一个包含静态图像的文件夹。要显示图像，我需要从 API 获取数据，比如说，应该显示哪个特定图像的指针。

<img class="some_img" src="{% static 'image_PIONTER.png' %}">

我在单独的文件 script.js 中使用 JS 获取该指针。为了实现我想要的，我需要用一些实际的单词（比如说“Captain”）替换 html 的 src 属性中的 POINTER，以从静态文件中获取图像“image_Captain.png”。如何从 JS 到 django 模板中获取此指针？如我所知，Django 在执行任何客户端（JS 代码）之前呈现其模板。所以我不能只传递这个属性，甚至 html 作为 $().html 或 $().append. 的一部分。它不会工作。图片应该在按钮点击时显示，最好不要刷新整个页面。提前致谢

【问题讨论】：

标签： javascript django

【解决方案1】：

如果您还没有，请尝试使用 Vue.js。您可以使用

从 CDN 中提取它

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<button @click = "someFunction()">Click me</button>
<div id = "vueApp">
<img v-if = "result" v-bind:src = "result">
</div>

然后像这样添加一个脚本标签并创建一个 Vue 实例（用你的值替换两个 '+' 内的东西）：

<script>
var search = new Vue({
        el: '#vueApp',
        delimiters: ["[[", "]]"],
        data(){
            return{
                result: ""
            }
        },
        mounted(){
            console.log("This is mounted")
        },
        methods:
        {   
          someFunction: function()
          {
             axios.get(`+SomeAPI+`).then((response) => 
                        {
                        this.result = (response.data)
                        }).catch((function(error)
                        {
                        console.log(error);
                        }
                        ));
                        
          }
        }
    })
</script>

【讨论】：