Javascript 当单独的JS实体绑定并更改数据时，Vue v-model绑定html元素无法更新Vue实例

我正在使用Vue.js作为遥控器上的主要双向数据绑定工具，并为我的闹钟构建：

可以找到服务器运行实例的公共可访问版本

页面的大部分都使用纯Vue或JavaScript来呈现项目。但我发现实现颜色选择器很容易，我选择了这个。由于使用普通的Vue和这个颜色选择器给我带来了很多奇怪的问题，无法访问Vue根实例的预渲染变量，我使用了

document.getElementById（）.style.display=“…”

渲染或隐藏颜色选择器（颜色选择器是“设置”选项卡的一部分，因此，在访问“主页”或“关于”或使用切换禁用LED设置功能时，应将其隐藏）

下面是我的Vue应用程序实例的定义：如您所见，我将颜色选择器代码定义为我定义的最后一个元素：

<div id="app"> <!--Vue.js-->

    <nav v-bind:class="active" v-on:click.prevent style="position: fixed !important; left: 50% !important; margin-top:140px !important; transform: translate(-50%, -50%) !important;">
        <a href="#" class="home" id="home" v-on:click="makeActive('home')">Home</a>
        <a href="#" class="settings" id="settings" v-on:click="makeActive('settings')">Settings</a>
        <a href="#" class="about" id="about" v-on:click="makeActive('about')">About</a>
    </nav>

    <div id="pagetitle">
        <p id="atomicclock">Prometheus Clock</p>
        <br>
        <br>
        <br>
        <br>
        <form id="snoozeform" action="/snooze" method="post" ><input id="snooze" type="submit" name="snooze" value="Snooze"></input></form>
        <div id="nd1" onClick="document.getElementById('snoozeform').submit();"></div>
    </div>

    <br>
    <br>
    <br>

    <div id="homecontent" v-if="active=='home'">
    <div id="main" >

        <div id="leftside">
            <div v-for="(alarm, index) in alarmsleft" :id="alarm.name">
                <input v-model="alarmsleft[index].time" class="time" type="time"></input>
                <button @click="submittimeleft(index)">Submit Time</button>

                <br>
                <br>

                <label class="switch">
                <input :value="alarmsleft[index].sound" v-if="alarmsleft[index].sound=='on'" @click="submitsoundleft(index)" type="checkbox" /checked>
                <input :value="alarmsleft[index].sound" v-else @click="submitsoundleft(index)" type="checkbox">
                <div class="slider round"></div>
                </label>
                </form>
                <label>Sound</label>

                <br>
                <br>

                <label class="switch">
                <input :value="alarmsleft[index].vibration" v-if="alarmsleft[index].vibration=='on'" @click="submitvibrationleft(index)" type="checkbox" /checked>
                <input :value="alarmsleft[index].vibration" v-else @click="submitvibrationleft(index)" type="checkbox">
                <div class="slider round"></div>
                </label>
                </form>
                <label>Vibration</label>

                <br>
                <br>
                <br>

            </div> <!--alarm.name-->

        </div><!--leftside-->

        <div id="rightside"> 
            <div v-for="(alarm, index) in alarmsright" :id="alarm.name">
                <input v-model="alarmsright[index].time" class="time" type="time"></input>
                <button @click="submittimeright(index)">Submit Time</button>

                <br>
                <br>

                <label class="switch">
                <input :value="alarmsright[index].sound" v-if="alarmsright[index].sound=='on'" @click="submitsoundright(index)" type="checkbox" /checked>
                <input :value="alarmsright[index].sound" v-else @click="submitsoundright(index)" type="checkbox">
                <div class="slider round"></div>
                </label>
                </form>
                <label>Sound</label>

                <br>
                <br>

                <label class="switch">
                <input :value="alarmsright[index].vibration" v-if="alarmsright[index].vibration=='on'" @click="submitvibrationright(index)" type="checkbox" /checked>
                <input :value="alarmsright[index].vibration" v-else @click="submitvibrationright(index)" type="checkbox">
                <div class="slider round"></div>
                </label>
                </form>
                <label>Vibration</label>

                <br>
                <br>
                <br>

            </div><!--alarm.name-->

        </div><!--rightside-->

    </div><!--homecontent-->
    </div><!--main-->

    <div v-else-if="active=='settings'" id="settingscontent">

    <div id="afterclock">

        <div id="afterclockleft">
            <br>
            <br>
            <form enctype="multipart/form-data">

                <div class="row">
                    <div class="column-small-12 padd0 align-center">
                        <div id="drop-box">
                            <h3><em>Change Alarm Audio</em></h3>
                            <br>
                            <br>
                        </div><!--drop-box-->
                    </div><!--column-small-12-->
                    <div class="column-small-12 padd0">
                        <input type="file" name="file" id="file" />
                    </div><!--column-small-12...-->
                </div><!--row-->

            </form>
            <br>
            <p>Current Track: {{this.trackinfo}}</p>
            <br>



        </div><!--afterclockleft-->

        <div id="afterclockright">
            <br>
            <h3><em>Enable IP Change Email Notifications</em></h3>
            <br>
            <br>

            <label class="switch">
                <input :value="enableemail" v-if="enableemail==true" @click="submitenableemail()" type="checkbox" /checked>
                <input :value="enableemail" v-else @click="submitenableemail()" type="checkbox">
                <div class="slider round"></div>
            </label>



                <div v-if="enableemail==true" style="float: right; margin-left: 10px;">
                    <button @click="submitemail()" style="float: right;">Submit New Email</button>
                    <input v-model="email" class="text" type="text" style="float: right;"></input>
                </div><!--v-if-->

            <div v-else>
                <br>
            </div><!--v-else-->

            <br>
            <br>
            <br>
            <h3><em>Use Custom Sound Card</em></h3>
            <label class="switch">
                <input :value="customsoundcard" v-if="customsoundcard==true" @click="submitcustomsoundcard()" type="checkbox" /checked>
                <input :value="customsoundcard" v-else @click="submitcustomsoundcard()" type="checkbox">
                <div class="slider round"></div>
            </label>



        </div> <!--id="afterclockright"-->
    </div><!--afterclock-->

</div><!--settingscontent-->

<div v-else-if="active=='about'" id="aboutcontent">
    <img src="img/home.jpg" style="left: 50%; margin-right: -50%;"/>
</div><!--aboutcontent-->

<div id="colordiv" style="float: left; padding-left: 10%;">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h3>Change the LED Settings of the Nixie Clock<h3>
    <br>
    <h4>Enable or Disable LED<h4>
    <label class="switch">
        <input :value="enableled" v-if="enableled==true" @click="submitenableled()" type="checkbox" /checked>
        <input :value="enableled" v-else @click="submitenableled()" type="checkbox">
        <div class="slider round"></div>
    </label>
</div> <!--id="colordiv"-->

<div style="float: left; padding-left: 10%;">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h4 id="colorh4">Change LED Color</h4>
    <input v-model="colors" type="text" id="color" style="background: black !important;">
    <button id="colorbutton" @click="submitcolors()">Submit New Color</button>
</div><!--end float left div-->

</div><!--app-->

我使用created（）函数通过使用

document.getElementById（“”.style.display=“none”隐藏颜色的所有元素

然后，作为makeActive（）方法的一部分，该方法在用户单击Home、Settings或About、Home和About中的一个按钮时被调用。该方法将以相同的方式隐藏颜色选择器，而Settings将通过以下方式显示颜色：
document.getElementById（“color”）.style.display=“”

现在，就不需要与Vue交互的地方而言，颜色选择器的功能非常完美。例如，通过键入更改颜色值会导致正确的行为（更改点在颜色贴图上的位置和Vue颜色数据）



但是，当使用颜色贴图直接更改文本框的值时，此更改不会反映在Vue颜色数据的值上


我的问题是如何反映通过颜色映射（正确更改文本）所做的更改，以同时更改data.colors的值

谢谢。
因为Vue和ColorPicker是独立的组件。您应该将更改事件处理程序绑定到ColorPicker，以便它链接到Vue。当它被更改时，它应该告诉Vue值已更改，反之亦然。这是您应该尝试的最低解决方案：


newvue({
el:“#应用程序”，
数据：{
颜色：“”
},
方法：{
setColorToVue:函数（十六进制）{
Vue.set（此“颜色”，十六进制）；
},
setColorToColorPicker:函数（十六进制）{
$（“#color”）.colorpicker（'setValue'，十六进制）；
}
},
挂载：函数（）{
var self=这个；
$（'#color'）.colorpicker（）.on（'changeColor'，函数（e）{
self.setColorToVue（e.color.toHex（））；
});
setTimeout（函数（）{
self.setColorToColorPicker（'#000000'）；
}, 1000);
}
});

{{colors}}



    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                alarmsleft: [],
                alarmsright: [],
                trackinfo: [],
                email: [],
                enableemail: [],
                customsoundcard: [],
                active: 'home',
                colors: [],
                enableled: [],
            },




            methods: {



                makeActive: function(item){

                    var elem = document.getElementById(this.active);
                    elem.setAttribute("style","color: #5e5b64 !important; border-bottom: none");
                    this.active = item;
                    var elem = document.getElementById(this.active);
                    elem.setAttribute("style","color: #ffffff !important; border-bottom: 3px solid white");
                    if (this.active == 'settings') {
                        document.getElementById("colordiv").style.display = "";
                        if (this.enableled == true) {
                            document.getElementById("color").style.display = "";
                            document.getElementById("colorh4").style.display = "";
                            document.getElementById("colorbutton").style.display = "";
                            document.getElementById("hidethis").style.display = "";
                        } else {
                            document.getElementById("color").style.display = "none";
                            document.getElementById("colorh4").style.display = "none";
                            document.getElementById("colorbutton").style.display = "none";
                            document.getElementById("hidethis").style.display = "none";
                        }
                    } else {
                        document.getElementById("colordiv").style.display = "none";
                        document.getElementById("color").style.display = "none";
                        document.getElementById("colorh4").style.display = "none";
                        document.getElementById("colorbutton").style.display = "none";
                        document.getElementById("hidethis").style.display = "none";
                    }

                },


                submittimeright(arg) {
                    $.ajax(
                        {
                            url: "/time",
                            type: 'post',
                            data: {
                                name: this.alarmsright[arg].name,
                                value: this.alarmsright[arg].time 
                            }
                        }
                    );
                },

                submittimeleft(arg) {
                    $.ajax(
                        {
                            url: "/time",
                            type: 'post',
                            data: {
                                name: this.alarmsleft[arg].name,
                                value: this.alarmsleft[arg].time 
                            }
                        }
                    );
                },

                submitsoundright(arg) {
                    if (this.alarmsright[arg].sound == 'on') {
                        this.alarmsright[arg].sound = 'off';
                    } else {
                        this.alarmsright[arg].sound = 'on';
                    }
                    $.ajax(
                        {
                            url: "/sound",
                            type: 'post',
                            data: {
                                name: this.alarmsright[arg].name,
                                value: this.alarmsright[arg].sound 
                            }
                        }
                    );
                },

                submitsoundleft(arg) {
                    if (this.alarmsleft[arg].sound == 'on') {
                        this.alarmsleft[arg].sound = 'off';
                    } else {
                        this.alarmsleft[arg].sound = 'on';
                    }
                    $.ajax(
                        {
                            url: "/sound",
                            type: 'post',
                            data: {
                                name: this.alarmsleft[arg].name,
                                value: this.alarmsleft[arg].sound 
                            }
                        }
                    );
                },

                submitvibrationright(arg) {
                    if (this.alarmsright[arg].vibration == 'on') {
                        this.alarmsright[arg].vibration = 'off';
                    } else {
                        this.alarmsright[arg].vibration = 'on';
                    }
                    $.ajax(
                        {
                            url: "/vibration",
                            type: 'post',
                            data: {
                                name: this.alarmsright[arg].name,
                                value: this.alarmsright[arg].vibration 
                            }
                        }
                    );
                },

                submitvibrationleft(arg) {
                    if (this.alarmsleft[arg].vibration == 'on') {
                        this.alarmsleft[arg].vibration = 'off';
                    } else {
                        this.alarmsleft[arg].vibration = 'on';
                    }
                    $.ajax(
                        {
                            url: "/vibration",
                            type: 'post',
                            data: {
                                name: this.alarmsleft[arg].name,
                                value: this.alarmsleft[arg].vibration 
                            }
                        }
                    );
                },

                submitenableemail() {
                    if (this.enableemail == true) {
                        this.enableemail = false;
                    } else {
                        this.enableemail = true;
                    }
                    $.ajax(
                        {
                            url: "/enableemail",
                            type: 'post',
                            data: {
                                value: this.enableemail,
                            }
                        }
                    );
                },

                submitcustomsoundcard() {
                    if (this.customsoundcard == true) {
                        this.customsoundcard = false;
                    } else {
                        this.customsoundcard = true;
                    }
                    $.ajax(
                        {
                            url: "/customsoundcard",
                            type: 'post',
                            data: {
                                value: this.customsoundcard,
                            }
                        }
                    );
                },

                submitemail() {
                    $.ajax(
                        {
                            url: "/newemail",
                            type: 'post',
                            data: {
                                value: this.email, 
                            }
                        }
                    );
                },

                submitenableled() {
                    if (this.enableled == true) {
                        this.enableled = false;
                        document.getElementById("color").style.display = "none";
                        document.getElementById("colorh4").style.display = "none";
                        document.getElementById("colorbutton").style.display = "none";
                    } else {
                        this.enableled = true;
                        document.getElementById("color").style.display = "";
                        document.getElementById("colorh4").style.display = "";
                        document.getElementById("colorbutton").style.display = "";
                    }
                    $.ajax(
                        {
                            url: "/submitenableled",
                            type: 'post',
                            data: {
                                value: this.enableled,
                            }
                        }
                    );
                },

                submitcolors() {
                    $.ajax(
                        {
                            url: "/submitcolors",
                            type: 'post',
                            data: {
                                value: this.colors, 
                            }
                        }
                    );
                },

            },


            created() {
                var elem = document.getElementById(this.active);
                elem.setAttribute("style","color: #ffffff !important; border-bottom: 3px solid white");
                document.getElementById("colordiv").style.display = "none";
                document.getElementById("color").style.display = "none";
                document.getElementById("colorh4").style.display = "none";
                document.getElementById("colorbutton").style.display = "none";

                $.ajaxSetup({ cache: false });

                $.getJSON('../json/alarms.json')
                    .done(data => {
                        this.alarmsleft = data.slice(0, 2);
                        this.alarmsright = data.slice(2);
                    });

                    $.get('../json/email')
                        .done( data => {
                        this.email = String(data).replace(/\n/g, '');
                });

                $.get('../json/enableemail')
                    .done( data => {
                        if (data.replace(/\n/g, '') == "true") {
                            this.enableemail = true;
                        } else {
                            this.enableemail = false;
                        }
                });

                $.get('../json/trackinfo')
                    .done( data => {
                        this.trackinfo = String(data).replace(/\n/g, '');
                });

                $.get('../json/colors')
                    .done( data => {
                        this.colors = String(data).replace(/\n/g, '');
                });

                $.get('../json/customsoundcard')
                    .done( data => {
                        if (data.replace(/\n/g, '') == "true") {
                            this.customsoundcard = true;
                        } else {
                            this.customsoundcard = false;
                        }
                });

                $.get('../json/enableled')
                    .done( data => {
                        if (data.replace(/\n/g, '') == "true") {
                            this.enableled = true;
                        } else {
                            this.enableled = false;
                        }
                });



            },

        })


            var nd = new NixieClock();
            nd.id = 'nd1';
            nd.urlCharsetImage = 'nixie/zm1080_l2_09bdm_90x150_8b.png';
            nd.charWidth = 90;
            nd.charHeight = 150;
            nd.extraGapsWidths[1] = 12;
            nd.extraGapsWidths[3] = 12;
            nd.charGapWidth = 10;
            document.getElementById(nd.id).parentNode.style.background = "black";
            document.getElementById(nd.id).parentNode.style.border = "2px solid #AAAAAA";
            nd.init();
            nd.run();
            nd.setText('-1.234567890');


            function showColor(){
                if (this.active == "settings")  {
                    console.log("makeActive()");
                    this.makeActive();
                }
            }

            $(function(){

                $("#drop-box").click(function(){
                    $("#file").click();
                });

                $(document).on('drop dragover', function (e) {
                    e.preventDefault();
                }); 

                $('input[type=file]').on('change', fileUpload);

                function fileUpload(event){  

                    $("#drop-box").html("<p>"+event.target.value+" uploading...</p>");
                    files = event.target.files;
                    var data = new FormData();
                    var error = 0;
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        console.log(file.size);
                        if (!file.type.match('audio.*')) {
                            $("#drop-box").html("<p> Audio only. Select another file</p>");
                            error = 1;
                        } else {
                            data.append('audio', file, file.name);
                        }
                    }

                    if(!error){
                        var xhr = new XMLHttpRequest();
                        xhr.open("POST", "/upload", true);
                        xhr.send(data);
                        xhr.onload = function () {
                        if (xhr.status === 200) {
                            $("#afterclock").html("\
                            <div id='afterclockleft'>\
                                <form enctype='multipart/form-data'>\
                                    <div class='row'>\
                                        <div class='column-small-12 padd0 align-center'>\
                                            <div id='drop-box'>\
                                                <p>Select Files</p>\
                                            </div>\
                                        </div>\
                                        <div class='column-small-12 padd0'>\
                                            <input type='file' name='file' id='file' />\
                                        </div>\
                                    </div>\
                                </form>\
                            </div>\
                            <br>\
                            <p>File Uploaded. Select more files</p>");
                        } else {
                            $("#afterclock").html("<p> Error in upload, try again.</p>");
                        }
                    };
                }
            }

            });

        </script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/js/bootstrap-colorpicker.min.js"></script>  
    <script>
        $('#color').colorpicker({});
    </script>

data: {
    ...
    active: 'home',
    ...
}