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({&nbsp; el: "#app",&nbsp; vuetify: new Vuetify(),&nbsp; data: () => ({&nbsp; &nbsp; items: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; text: "true",&nbsp; &nbsp; &nbsp; &nbsp; value: true&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; text: "false",&nbsp; &nbsp; &nbsp; &nbsp; value: false&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; text: "null",&nbsp; &nbsp; &nbsp; &nbsp; value: null&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; })});