flask+vue单页快速CURD操作

需要为app做个音乐管理的内容，我的想法就是在一个页面内完成，展示与编辑修改为一个输入框，那么我需要在span上面进行设置contentedit=true让span可以自由编辑，也要让vue能够获取到改变了的值，来对操作进行更新删除提交。

问题

这里如果使用v-model，就有问题了，首先它无法作用在span组件上，另外如果设置contentedit它也无法获取内容。以此便只能使用一个小技巧.

小技巧

在span中@blur=’music.icon=$event.target.innerText' v-html='music.icon' 在焦点事件中处理span的内容变化，这样更新后，在事件处理上面就可以调用@clck="operation(music)"

                            删除
                        
                            
                            更新
                        
                            
                            添加
                        

全部代码如下

{% extends 'base.html' %}
{% block content %}
后台系统
    

        
在此管理您的音乐
        {% if current_user.username %}
            
{{ current_user.username }}您已经登录 登出
            
        {% else %}
            

                您还未登录
                登入
                注册
            
        {% endif %}
    

    

        

                

                    

                        id
                        曲目
                        种类
                        文件名称
                        封面
                        歌词名称
                        作者
                    

                    


                        
                        
                        
                        
                        封面链接
                         
                        
                        

                        
                            删除
                        
                            
                            更新
                        
                            
                            添加
                        
                        
                    
                
        
    

{% endblock %}
{% block addjs %}
    

{% endblock %}

created中是在页面加载之前进行获取数据的操作，这里调用api进行所有曲目的音乐获取.