javascript - 当单独的 JS 实体绑定(bind)然后更改数据时，Vue v-model 绑定(bind)的 html 元素无法更新 Vue 实例

Question

我使用 Vue.js 作为 Remote 上主要的双向数据绑定(bind)工具，并为我的闹钟构建:read more here。

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

页面的大部分内容使用纯 Vue 或 JavaScript 来渲染项目。但我发现 bootstrap color picker 是实现颜色选择器的一个简单选择，所以我选择了它。由于使用普通 Vue 和这个颜色选择器给我带来了很多奇怪的问题，无法访问 Vue 根实例的预渲染变量，我使用 document.getElementById().style.display = "..."; 来渲染或隐藏颜色选择器(颜色选择器是设置选项卡的一部分) ，因此，当访问 home 或 about 时，或者当使用切换开关禁用 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-->

然后，这是我的脚本定义:

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

如您所见，我不依赖“v-if”代码来渲染或不渲染颜色选择器代码(因为这给我带来了很多问题)。相反，因为我知道由于默认数据值，转到页面的根目录会自动加载主页:

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

我使用created()函数通过document.getElementById("").style.display = "none";隐藏颜色的所有元素

然后，作为 makeActive() 方法的一部分，当用户单击“主页”、“设置”或“关于”中的按钮之一时，“主页”和“关于”将调用该方法，“主页”和“关于”将以相同的方式隐藏颜色选择器，而“设置”将显示颜色通过:document.getElementById("color").style.display = ""; 。

现在，颜色选择器的功能在不需要与 Vue 交互的地方已经非常完美了。例如，通过键入结果更改颜色值会产生正确的行为(更改颜色图上点的位置和 Vue 颜色数据)。

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

我的问题是如何反射(reflect)通过颜色图(正确更改文本)所做的更改，以更改 data.colors 的值。

谢谢。

Answer 1

由于 Vue 和 ColorPicker 是独立的组件。您应该将更改事件处理程序绑定(bind)到 ColorPicker，以便它链接到 Vue。当它发生变化时，它应该告诉 Vue 值已更改，反之亦然。这是您应该尝试的最小解决方案:

new Vue({
    el: '#app',
    data: {
        colors: ''
    },
    methods: {
        setColorToVue: function(hex) {
            Vue.set(this, 'colors', hex);
        },
        setColorToColorPicker: function(hex) {
            $("#color").colorpicker('setValue', hex);
        }
    },
    mounted: function() {
        var self = this;
        $('#color').colorpicker().on('changeColor', function(e) {
            self.setColorToVue(e.color.toHex());
        });
        setTimeout(function() {
            self.setColorToColorPicker('#000000');
        }, 1000);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/js/bootstrap-colorpicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/css/bootstrap-colorpicker.min.css" rel="stylesheet"/>


<div id="app">
  {{colors}}
  <br />
  <input id="color" type="text" />
</div>