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

<span class="text-danger" v-html="music.title" @blur="music.title=$event.target.innerText" 
contenteditable="true"></span>

<span>
                            <button class="btn btn-danger btn-sm" @click="delete_music(music)">删除</button>
                        </span>
                            <span>
                            <button class="btn btn-primary btn-sm" @click="update_music(music)">更新</button>
                        </span>
                            <span>
                            <button class="btn btn-success btn-sm" @click="add_music(music)">添加</button>
                        </span>

全部代码如下

{% extends 'base.html' %}
{% block content %}
<h2>后台系统</h2>
    <div class="column header">
        <h4 style="text-indent: 50px;font-size: 16px;">在此管理您的音乐</h4>
        {% if current_user.username %}
            <div class="float-right">{{ current_user.username }}您已经登录 <a href="{{ url_for('auth.logout') }}">登出</a>
            </div>
        {% else %}
            <div class="float-right">
                您还未登录
                <a href="{{ url_for('auth.login') }}">登入</a>
                <a href="{{ url_for('auth.register') }}">注册</a>
            </div>
        {% endif %}
    </div>

    <div class="container" id="app" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" >
        <div class="list-group">
                <ul class="list-group">
                    <li class="list-group-item list-group-item-success">
                        <span>id</span>
                        <span>曲目</span>
                        <span>种类</span>
                        <span>文件名称</span>
                        <span>封面</span>
                        <span>歌词名称</span>
                        <span>作者</span>
                    </li>

                    <li class="list-group-item list-group-item-light" v-for="music in musics">

                        <span v-html="music.id"></span>
                        <span class="text-danger" v-html="music.title" @blur="music.title=$event.target.innerText" contenteditable="true"></span>
                        <span contenteditable="true" v-html="music.category" @blur="music.category=$event.target.innerText"></span>
                        <span contenteditable="true" v-html="music.filename" @blur="music.filename=$event.target.innerText"></span>
                        <span contenteditable="true" @blur="music.icon=$event.target.innerText"><a v-bind:href='music.icon'>封面链接</a></span>
                        <span contenteditable="true" v-html="music.lyc" @blur="music.lyc=$event.target.innerText"> </span>
                        <span contenteditable="true" v-html="music.name" @blur="music.name=$event.target.innerText"></span>
                        <div class="float-right">
                        <span>
                            <button class="btn btn-danger btn-sm" @click="delete_music(music)">删除</button>
                        </span>
                            <span>
                            <button class="btn btn-primary btn-sm" @click="update_music(music)">更新</button>
                        </span>
                            <span>
                            <button class="btn btn-success btn-sm" @click="add_music(music)">添加</button>
                        </span>
                        </div>
                    </li>
                </ul>
        </div>
    </div>

{% endblock %}
{% block addjs %}
    <script>

        new Vue({
            delimiters: ['{[', ']}'],
            el: '#app',
            data: {
                musics: [],
            },
            created: function () {
                let f = this;
                $.get('/app/music', function (v) {
                    f.musics = v.data;
                })
            },
            methods: {
                delete_music: function (music) {
                    alert(music.icon);
                },
                add_music: function () {
                    alert(music.icon)
                },
                update_music: function (music) {
                    alert(music.icon);
                }
            }
        });
    </script>

{% endblock %}

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