Vue，带有 true/false 布尔值的 v-select 组件

Question

一个词：国家。您的 HTML 页面没有显示正确的按钮颜色，因为您没有在页面刷新之间维护状态。就目前而言，即使您在灯已经亮起时加载页面，它仍然不会向您显示绿色按钮。最简单的解决方法是使用 JS 维护 cookie 或本地存储中的灯光状态，在页面加载时读取此状态，然后为按钮显示适当的颜色。// on clicking the button, do this:localStorage.setItem('isLightOn', '1');// and on page load, do this:if (localStorage.getItem('isLightOn') === '1') {  $('button').addClass('selected');} else {  $('button').removeClass('selected');}这样做的缺点是它不能根据服务器反映灯光的当前状态。为了始终在页面中显示正确的灯光状态，您需要一种机制来从服务器查询灯光的当前状态。然后您可以从服务器读取状态，然后显示相应的 HTML。您甚至可以将其放入索引文件中。调用它index.php并使用与您的 中相同的内容index.html，并添加一些 PHP：<?php  # Let's assume this returns `true` when light is on, and `false` is it's off.  $lightState = @file_get_contents('http://1.1.1.1/cgi-bin/output?username=abcd&password=cdef&action=read&pin=relay');  if ($lightState == true):?>  <button class="button selected">Lights On</button><?php  else:?>  <button class="button">Lights On</button>我可能对语法有点生疏，但这就是总体思路。希望有帮助！

Answer 1

要使用布尔值和 null，您的项目应具有以下结构：

new Vue({

  el: "#app",

  vuetify: new Vuetify(),

  data: () => ({

    items: [

      {

        text: "true",

        value: true

      },

      {

        text: "false",

        value: false

      },

      {

        text: "null",

        value: null

      }

    ]

  })

});