前端vue数组比较控制开或者关闭

Question

有两个数组，一个是

{"location": "1", "contact": "0", "microphone": "0", "camera": "0", "blueTooth": "1", "storage": "0"}

另一个

{  "isOpen": 0, "name": "pushNoti"}
{i "isOpen": 0, "name": "microphone"}

怎么通过第二个数组里面的name和第一数组作比较，来控制isOpen

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

从你的问题来看，你似乎想使用Vue.js来控制一些设置的状态，基于第二个数组中的name字段与第一个数组中的对应键进行比较。假设你的第一个数组代表一些设备的开关状态，而第二个数组代表你想要控制的设备名称及其对应的开关状态。为了实现这一点，你可以按照以下步骤进行：

首先，我们需要假设你已经有了一些数据结构。从你给的描述中，我猜可能的结构如下：

第一个数组（设备状态数组）：

const deviceStatus = {
  location: "1", // 可以是 'open' 或 'closed' 或其他表示开启状态的字符串
  contact: "0",  // 可以是 'off' 或 'on'，或者其它表示关闭状态的字符串
  microphone: "0",
  camera: "0",
  blueTooth: "1",
  storage: "0"
};

第二个数组（控制列表）：

const controlList = [
  { name: "pushNoti", isOpen: 0 },  // 这里可能需要根据实际情况调整名称和状态值
  { name: "microphone", isOpen: 0 } // 同上
];

在Vue中，你可以使用计算属性（computed properties）来根据这些数据进行动态计算，然后基于计算结果控制显示或隐藏某些元素。假设你想根据controlList中的isOpen值来控制设备状态，你可以这样做：

在你的Vue组件中：

<template>
  <!-- 根据需要显示或隐藏的元素 -->
  <div v-if="shouldShow('microphone')">Microphone is open</div> <!-- 例如，这里我们检查microphone的状态 -->
</template>

<script>
export default {
  data() {
    return {
      deviceStatus, // 设备状态数据假设已经定义好并引入进来
      controlList // 控制列表数据假设已经定义好并引入进来
    };
  },
  computed: {
    // 计算属性，用于检查特定设备的状态并返回是否应该显示该元素
    shouldShow(device) {
      const controlItem = this.controlList.find(item => item.name === device); // 找到对应的控制项
      return controlItem && controlItem.isOpen === 'open' || controlItem.isOpen === true; // 根据isOpen的值决定是否返回true或false来控制显示与隐藏
    } // 可以根据需要调整这里的逻辑和返回值类型（例如直接返回字符串或布尔值）
  }
};
</script>

这样，你就可以根据controlList中的isOpen值来控制特定设备的显示或隐藏状态了。注意这只是一个简单的示例，你可能需要根据实际需求调整逻辑和数据结构。